> ## 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 React InstantSearch app.

export const Index = () => <Tooltip tip="An Algolia index is a searchable dataset that consists of records and configuration settings. These settings define how the records are searched and ranked.">
    index
  </Tooltip>;

<Note>
  This is the **React InstantSearch v7** documentation.
  If you're upgrading from v6, see the [upgrade guide](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-v6-to-react-instantsearch-v7).
  If you were using React InstantSearch Hooks,
  this v7 documentation applies—just check for [necessary changes](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-hooks-to-react-instantsearch-v7).
  To continue using v6, you can find the [archived documentation](https://algolia.com/old-docs/deprecated/instantsearch/react/v6/api-reference/instantsearch/).
</Note>

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

This guide shows how to use [`<Autocomplete>`](/doc/api-reference/widgets/autocomplete/react) 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/react/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/react/query-suggestions">
    Browse the source for the Query Suggestions UI example on GitHub.
  </Card>
</Columns>

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

<Steps>
  <Step title="Create the multi-index search experience">
    The [`<Autocomplete>`](/doc/api-reference/widgets/autocomplete/react) 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/react).

    ```jsx React icon=code theme={"system"}
    // ...

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