> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Build a Query Suggestions UI

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

<Note>
  You are currently reading the documentation for InstantSearch.js v4.
  Read the migration guide to learn [how to upgrade from v3 to v4](/doc/guides/building-search-ui/upgrade-guides/js#upgrade-from-v3-to-v4).
  You can still access the [v3 documentation for this page](https://algolia.com/old-docs/deprecated/instantsearch/js/v3/guides/query-suggestions).
</Note>

To help users with their search, Algolia provides [Query Suggestions](/doc/guides/building-search-ui/ui-and-ux-patterns/query-suggestions/js).
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`](/doc/api-reference/widgets/autocomplete/js) widget for that.

This guide describes how to use the [`autocomplete`](/doc/api-reference/widgets/autocomplete/js) widget to display a list of suggestions.

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

<Columns>
  <Card title="Open CodeSandbox" icon="codesandbox" href="https://codesandbox.io/s/github/algolia/instantsearch/tree/master/examples/js/query-suggestions">
    Run and edit the Query Suggestions UI example in CodeSandbox.
  </Card>

  <Card title="Explore source code" icon="github" href="https://github.com/algolia/instantsearch/tree/master/examples/js/query-suggestions">
    Browse the source for the Query Suggestions UI example on GitHub.
  </Card>
</Columns>

## 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:

<Steps>
  <Step title="Create the multi-index search experience">
    The [`autocomplete`](/doc/api-reference/widgets/autocomplete/js) 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](/doc/guides/building-search-ui/ui-and-ux-patterns/multi-index-search/js).

    <Note>
      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](/doc/guides/building-search-ui/installation/js).
    </Note>

    ```js JavaScript icon=code theme={"system"}
    // ...

    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();
    ```
  </Step>
</Steps>