Build a Query Suggestions UI

Build a user interface to show Query Suggestions in your React InstantSearch app.

This is the React InstantSearch v7 documentation. If you’re upgrading from v6, see the upgrade guide. If you were using React InstantSearch Hooks, this v7 documentation applies—just check for necessary changes. To continue using v6, you can find the archived documentation.

To help users with their search, Algolia provides Query Suggestions. This feature creates an index with the best queries generated by users. You can then use this index to propose suggestions to your users as they’re typing into a search input.

Once you’ve configured the generation of the Query Suggestions index, you need to query this index as well. You can use the <Autocomplete> widget for that.

This guide shows how to use <Autocomplete> to display a list of suggestions.

Once users select a suggestion, it will apply the query.

View demoView source code

Refine your results with suggestions

To set up multi-index search experience so users can select a suggestion and use it to search the main index:

1. Create the multi-index search experience

   The <Autocomplete> widget can target the index that contains the suggestions, and the rest of the widgets target the main index that holds the data. For more information, see Multi-index search.

   React

   // ...
   
   import { EXPERIMENTAL_Autocomplete } from 'react-instantsearch';
   
   export function App() {
     return (
       <InstantSearch
         searchClient={searchClient}
         indexName="instant_search"
       >
         <EXPERIMENTAL_Autocomplete
           showSuggestions={{
             indexName: 'instant_search_demo_query_suggestions',
           }}
         />
         <Hits hitComponent={HitComponent} />
       </InstantSearch>
     )
   }