Skip to main content
The <Autocomplete> component provides an autocomplete search experience with support for multiple indices, query suggestions, and recent searches.
This is an experimental component. The API may change in future releases.

​
Import

import { EXPERIMENTAL_Autocomplete } from 'react-instantsearch';

​
Props

​
indices
Array<IndexConfig>
Configuration for additional indices to search in the autocomplete dropdown.
<EXPERIMENTAL_Autocomplete
  indices={[
    {
      indexName: 'products',
      itemComponent: ({ item }) => <div>{item.name}</div>,
    },
  ]}
/>
​
showSuggestions
object
Configuration for displaying query suggestions.
<EXPERIMENTAL_Autocomplete
  showSuggestions={{
    indexName: 'query_suggestions',
    itemComponent: ({ item }) => <div>{item.query}</div>,
  }}
/>
​
showRecent
boolean | object
Enable or configure recent search display.
// Simple enable
<EXPERIMENTAL_Autocomplete showRecent={true} />

// With configuration
<EXPERIMENTAL_Autocomplete
  showRecent={{
    storageKey: 'my-recent-searches',
    headerComponent: () => <h3>Recent Searches</h3>,
  }}
/>
​
getSearchPageURL
(nextUiState: IndexUiState) => string
Function to generate the URL for the search results page when a query is selected.
<EXPERIMENTAL_Autocomplete
  getSearchPageURL={(uiState) => `/search?query=${uiState.query}`}
/>
​
onSelect
function
Custom function called when an item is selected.
<EXPERIMENTAL_Autocomplete
  onSelect={({ query, setQuery, url }) => {
    if (url) {
      window.location.href = url;
    } else {
      setQuery(query);
    }
  }}
/>
​
transformItems
function
Transform the items returned by the autocomplete.
<EXPERIMENTAL_Autocomplete
  transformItems={(indices) =>
    indices.map((index) => ({
      ...index,
      hits: index.hits.slice(0, 3),
    }))
  }
/>
​
panelComponent
React.Component
Custom component to render the autocomplete panel.
​
searchParameters
object
Additional search parameters to apply.
<EXPERIMENTAL_Autocomplete
  searchParameters={{
    hitsPerPage: 5,
    filters: 'available:true',
  }}
/>
​
placeholder
string
Placeholder text for the search input.
​
detachedMediaQuery
string
default:"(max-width: 680px)"
Media query for enabling detached (mobile) mode. Set to empty string to disable.
<EXPERIMENTAL_Autocomplete detachedMediaQuery="(max-width: 768px)" />
​
translations
object
Customize the text strings.
<EXPERIMENTAL_Autocomplete
  translations={{
    detachedCancelButtonText: 'Cancel',
    detachedSearchButtonTitle: 'Search',
    detachedClearButtonTitle: 'Clear',
  }}
/>
​
classNames
object
CSS classes to customize the component styling.

​
Example

import { InstantSearch, EXPERIMENTAL_Autocomplete } from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <EXPERIMENTAL_Autocomplete
        indices={[
          {
            indexName: 'products',
            itemComponent: ({ item }) => (
              <div>
                <h4>{item.name}</h4>
                <p>${item.price}</p>
              </div>
            ),
          },
        ]}
        showSuggestions={{
          indexName: 'query_suggestions',
        }}
        showRecent={true}
        placeholder="Search products..."
      />
    </InstantSearch>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us