useSearchProductSuggestions

The useSearchProductSuggestions hook is a specialized wrapper around useFetch used to fetch product suggestions based on a search term. Unlike query suggestions which return keywords, this hook returns actual product objects, ideal for "instant search" or "search-as-you-type" results. It works on the client as well as on the server.

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

const { data: productSuggestions, isLoading } = useSearchProductSuggestions(searchTerm, searchOptions, fetchOptions);

Parameters

Name	Type	Required	Description
searchTerm	string	✔️	The search term to get product suggestions for.
searchOptions	SearchSuggestionsRequestOptions		Options for the suggestions request.
fetchOptions	FetchMinOptions		Standard options for the useFetch hook.

searchTerm

The string representing the search query.

searchOptions

• Type: SearchSuggestionsRequestOptions

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

fetchOptions

Standard data fetching options. See useFetch for more information.

Return value

• Type: FetchResult<SearchResponse>

Property	Type	Description
data	SearchResponse | null	The search response containing the list of suggested products.
isLoading	boolean	True if the request is in progress.
isDone	boolean	True if the request has finished.

Example

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

function SearchDropdown({ query }) {
    const { data, isLoading } = useSearchProductSuggestions(query, { max: 5 });

    if (isLoading || !data?.products?.length) return null;

    return (
        <div className="instant-results">
            {data.products.map(p => (
                <div key={p.code} className="result-item">
                    <img src={p.images?.[0]?.url} alt={p.name} />
                    <span>{p.name}</span>
                </div>
            ))}
        </div>
    );
}