useSuggest

Version: 2.x

The useSuggest hook provides typeahead suggestions and document preview results as a user enters a search phrase. It's ideal for building autocomplete and "search-as-you-type" experiences. The hook is only available in versions 2.4.0 and above.

Configuration

To use the hook, you can provide the searchIndexId and the partial search phrase as query.

import { useSuggest } from '@sitecore-content-sdk/react';

const {
  querySuggestions,
  previewResults,
  isLoading,
  isSuccess,
  isError,
  error,
} = useSuggest({
  searchIndexId: '1234567890',
  query: 'running sho',
  locale: 'en-US',
});

Supported parameters

The hook supports the following options:

Parameter	Type	Description
`searchIndexId`	string	The ID of the SitecoreAI search index to retrieve results from. Required
`query`	string	Partial text used for typeahead suggestions. It is trimmed before the request is sent and mapped to the `keyphrase` parameter used by `SearchService.suggest()`. No request is sent when `query` is omitted or contains only whitespace.
`locale`	string	Specify the locale for the request. Required for multi-locale index configurations (for example, `'en'`, `'fr-FR'`, `'el-GR'`). Omit for single-locale indexes.
`enabled`	boolean	Specify whether the request runs automatically. Defaults to `true`.
`keepPreviousData`	boolean	Specify whether the previous suggestions and previews should be kept while fetching a new query. Defaults to `false`.

The hook does not send a request when query is omitted or contains only whitespace. Use enabled: false when the request should not run automatically.

The returned state includes querySuggestions, previewResults, status, error, and the loading flags isLoading, isSuccess, and isError. When keepPreviousData is enabled, isPreviousData indicates that the returned results belong to the previous query while the new request is loading.

If you have suggestions for improving this article, let us know!