Skip to main content
You are currently reading the documentation for InstantSearch.js v4. Read the migration guide to learn how to upgrade from v3 to v4. You can still access the v3 documentation for this page.
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 autocomplete widget for that. This guide describes how to use the autocomplete widget to display a list of suggestions. Once users select a suggestion, it will apply the query.
View demoView source code

​
Refine your results with the 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.
All examples in this guide assume you’ve included InstantSearch.js in your web page from a CDN. If you’re using a package manager, adjust how you import InstantSearch.js and its widgets.
JavaScript
// ...

const searchClient = algoliasearch("ALGOLIA_APPLICATION_ID", "ALGOLIA_API_KEY");

const search = instantsearch({
  indexName: "instant_search",
  searchClient,
});

search.addWidgets([
  instantsearch.widgets.EXPERIMENTAL_autocomplete({
    container: '#autocomplete',
    showSuggestions: {
      indexName: 'instant_search_demo_query_suggestions',
    },
  }),
  instantsearch.widgets.hits({
    container: "#hits",
    templates: {
      // ...
    },
  }),
]);

search.start();