useSearchQuerySuggestions

The useSearchQuerySuggestions hook is a specialized wrapper around useFetch used to fetch autocompletion suggestions for search queries. It is typically used in a search input component to provide real-time feedback as the user types. It works on the client as well as on the server.

import { useSearchQuerySuggestions } from '@archibald/search';

const { data: suggestions, isLoading } = useSearchQuerySuggestions(searchTerm, searchOptions, fetchOptions);

Parameters

Name	Type	Required	Description
searchTerm	string	✔️	The partial search term to get suggestions for.
searchOptions	SearchSuggestionsRequestOptions		Options for the suggestions request (e.g., max count).
fetchOptions	FetchMinOptions		Standard options for the useFetch hook.

searchTerm

The string representing the user's current input in the search field.

searchOptions

• Type: SearchSuggestionsRequestOptions

Property	Type	Description
max	number	The maximum number of suggestions to return.
fields	string	Defines the depth of data returned for suggestions.

fetchOptions

Standard data fetching options. See useFetch for more information.

Return value

• Type: FetchResult<SearchSuggestionResponse>

Property	Type	Description
data	SearchSuggestionResponse | null	The list of query suggestions.
isLoading	boolean	True if the request is in progress.
isDone	boolean	True if the request has finished.

Example

import { useSearchQuerySuggestions } from '@archibald/search';

function SearchInput({ value }) {
    const { data, isLoading } = useSearchQuerySuggestions(value);

    const suggestions = data?.suggestions || [];

    return (
        <div>
            <input type="text" value={value} />
            {value.length > 2 && (
                <ul>
                    {suggestions.map(s => (
                        <li key={s.value}>{s.value}</li>
                    ))}
                </ul>
            )}
        </div>
    );
}