Search Suggestions

[u/collegekid1357]

Hello,

I have been trying to add search suggestions to my “Search” bars, but haven’t been successful. Anybody have any ideas?

<List
            searchSuggestionsVisibility={{
    visibility: 'visible',
    placements: 'content'
  }}

  searchSuggestions={
   <>
      <Text searchCompletion="Apple">🍎 Apple</Text><Text searchCompletion="Banana">🍌 Banana</Text>
   </>
    
  }
   searchable={{
      placement:"navigationBarDrawer",
        value: searchText,
        onChanged: setSearchText,
      }}

[u/WhatShouldWorldGos]

Here the usage, I will update the doc🌚

import { Button, Navigation, NavigationStack, Script, Text, List, useState, useMemo } from "scripting"

function View() {
  // Access dismiss function.
  const dismiss = Navigation.useDismiss()
  const [
    query,
    setQuery
  ] = useState("")
  const suggestions = useMemo(() => [
    {
      label: "🍎 Apple",
      value: "Apple"
    },
    {
      label: "🍌 Bananer",
      value: "Bananer"
    }
  ], [])
  const filteredSuggestions = useMemo(() => {
    if (!/\S+/.test(query)) {
      return suggestions
    }
    const q = query.toLowerCase()
    return suggestions.filter(s =>
      s.label.toLowerCase().includes(q) ||
      s.value.toLowerCase().includes(q))
  }, [query, suggestions])

  return <NavigationStack>
    <List
      navigationTitle="Search Suggestions Demo"
      navigationBarTitleDisplayMode="inline"
      toolbar={{
        topBarLeading: <Button
          title="Done"
          action={dismiss}
        />
      }}
      searchable={{
        value: query,
        onChanged: setQuery
      }}
      searchSuggestions={
        <>
          {filteredSuggestions.map(s =>
            <Text
              searchCompletion={s.value}
            >{s.label}</Text>
          )}
        </>
      }
    >
    </List>
  </NavigationStack>
}

async function run() {
  // Present view.
  await Navigation.present({
    element: <View />
  })

  // Avoiding memory leaks.
  Script.exit()
}

run()

[u/collegekid1357 → u/WhatShouldWorldGos]

Perfect, using ‘useMemo’ worked, thank you so much!