Skip to main content

Function: useAutocomplete()

useAutocomplete(query, options): object

Defined in: web/lib/hooks/use-preprint-search.ts:246

Hook for preprint autocomplete suggestions.

Parameters​

query​

string

Search query (minimum 2 characters)

options​

UseAutocompleteOptions = {}

Autocomplete options

Returns​

object

Autocomplete suggestions with loading state

error​

error: null | Error = result.error

isFetching​

isFetching: boolean = result.isFetching

isLoading​

isLoading: boolean = result.isLoading

suggestions​

suggestions: readonly AutocompleteSuggestion[]

Remarks​

Provides fast autocomplete suggestions while the user types. Implements best practices from Baymard Institute research:

  • Max 8 suggestions to prevent choice paralysis
  • 200ms debounce to reduce API calls
  • Inverted highlighting (bold untyped portion)
  • Field match scores for personalized ranking

Example​

const [query, setQuery] = useState('');
const { suggestions, isLoading } = useAutocomplete(query);

return (
  <Combobox>
    <Input value={query} onChange={e => setQuery(e.target.value)} />
    {suggestions.map(s => (
      <ComboboxOption key={s.externalId} value={s}>
        {s.highlightedTitle}
      </ComboboxOption>
    ))}
  </Combobox>
);