API Reference / React InstantSearch / Autocomplete

Autocomplete

A

About this widget # A

We released React InstantSearch Hooks, a new InstantSearch library for React. We recommend using React InstantSearch Hooks in new projects or upgrading from React InstantSearch.

The connectAutoComplete connector provides the logic to create a connected component that provides access to all indices of your InstantSearch instance.

To configure the number of hits retrieved, use the HitsPerPage widget or pass the hitsPerPage prop to a Configure widget.

If you’re building an autocomplete, you should use the Autocomplete library which lets you build a full-featured, accessible autocomplete experience. This is the recommended way of building an autocomplete search with Algolia.

Guides What Is Autocomplete?
Integrate Autocomplete with React InstantSearch Hooks
Using Autocomplete with React

Customize the UI with connectAutoComplete# A

If you want to create your own UI of the Autocomplete widget or use another UI library, you can use connectors.

Connectors are higher-order components. They encapsulate the logic for a specific kind of widget and they provide a way to interact with the InstantSearch context.

They have an outer component API that we call exposed props, and they provide some other props to the wrapped components which are called the provided props.

It’s a 3-step process:

// 1. Create a React component
const Autocomplete = () => {
  // return the DOM output
};

// 2. Connect the component using the connector
const CustomAutocomplete = connectAutoComplete(Autocomplete);

// 3. Use your connected widget
<CustomAutocomplete />

See code examples

Create a React component#

const Autocomplete = ({
  object[] hits,
  string currentRefinement,
  function refine,
}) => {
  // return the DOM output
}

Provided Props#

hits #
type: object[]

The records that matched the search. The shape of the array changes between a single index search and a multi-index search (see the examples below):

  • Single index: hit[]
  • Multi index: { index: string, hits: hit[] }[]
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// Single index
const Autocomplete = ({ hits }) => (
  <ul>
    {hits.map(hit => (
      <li key={hit.objectID}>{hit.name}</li>
    ))}
  </ul>
);

// Multi index
const Autocomplete = ({ hits }) => (
  <ul>
    {hits.map(index => (
      <li key={index.index}>
        <h2>{index.index}</h2>
        <ul>
          {index.hits.map(hit => (
            <li key={hit.objectID}>{hit.name}</li>
          ))}
        </ul>
      </li>
    ))}
  </ul>
);
currentRefinement #
type: string

The current query.
Copy 
1
2
3
4
5
6
7

const Autocomplete = ({ currentRefinement, refine }) => (
  <input
    type="search"
    value={currentRefinement}
    onChange={event => refine(event.currentTarget.value)}
  />
);
refine #
type: function

Changes the query.
Copy 
1
2
3
4
5
6
7

const Autocomplete = ({ currentRefinement, refine }) => (
  <input
    type="search"
    value={currentRefinement}
    onChange={event => refine(event.currentTarget.value)}
  />
);

Create and instantiate your connected widget#

const CustomAutocomplete = connectAutoComplete(Autocomplete);

<CustomAutocomplete
  // Optional parameters
  defaultRefinement={string}
/>

Exposed Props#

defaultRefinement #
type: string
Optional

Provides a default value for the query.
Copy 
1

<CustomAutocomplete defaultRefinement="iphone" />

Full example#

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import { connectAutoComplete } from 'react-instantsearch-dom';

const Autocomplete = ({ hits, currentRefinement, refine }) => (
  <ul>
    <li>
      <input
        type="search"
        value={currentRefinement}
        onChange={event => refine(event.currentTarget.value)}
      />
    </li>
    {hits.map(hit => (
      <li key={hit.objectID}>{hit.name}</li>
    ))}
  </ul>
);

const CustomAutocomplete = connectAutoComplete(Autocomplete);
Did you find this page helpful?
React InstantSearch v6