Build a Query Suggestions UI

<EXPERIMENTAL_Autocomplete
  placeholder="Search for products"
  showRecent
  showQuerySuggestions={{
    indexName: "instant_search_demo_query_suggestions",
    getURL: (item) => `/search?q=${item.query}`,
  }}
  indices={[
    {
      indexName: "instant_search",
      // ...
    },
  ]}
/>

// ...

import { EXPERIMENTAL_Autocomplete } from 'react-instantsearch';

export function App() {
  return (
    <InstantSearch
      searchClient={searchClient}
      indexName="instant_search"
    >
      <EXPERIMENTAL_Autocomplete
        showQuerySuggestions={{
          indexName: 'instant_search_demo_query_suggestions',
        }}
      />
      <Hits hitComponent={HitComponent} />
    </InstantSearch>
  )
}

<EXPERIMENTAL_Autocomplete
  showRecent={{
    itemComponent: ({ item, onSelect }) => (
      <button type="button" onClick={onSelect}>
        {item.query}
      </button>
    ),
  }}
  // ...
/>

import { ReverseHighlight } from "react-instantsearch";

<EXPERIMENTAL_Autocomplete
  showQuerySuggestions={{
    indexName: "instant_search_demo_query_suggestions",
    searchParameters: { hitsPerPage: 5 },
    itemComponent: ({ item, onSelect }) => (
      <button type="button" onClick={onSelect}>
        <ReverseHighlight hit={item} attribute="query" />
      </button>
    ),
  }}
  // ...
/>;