Autocomplete Library for React
A computer on a search page, with recommendations being inserted on the side

What is Algolia

Algolia is a hosted, API-first platform used to build world-class search & discovery experiences. 

Start building quickly using libraries for every major language and framework. Scale your solution with a platform that serves over 85 billion queries for more than 13k customers every month.

Autocomplete Library for React

Add autocomplete to your react applications

Autocomplete React library is

  • An open source, production-ready library to build interactive, fully customizable autocomplete experiences - explore the showcase.
  • The library creates an input and provides the interactivity and accessibility attributes, but you’re in full control of the DOM elements to output.
  • Integrates with Instantsearch.js  

Features

  • Open source, production-ready JavaScript library
  • Works with multiple sources of data
  • Datasources can be static or dynamic
  • Supports promises so that you can fetch sources from any asynchronous API
  • Provides a Templates API to customize the rendering
  • Manages state allowing you to control UI behavior 
  • Includes plugins for query suggestions, related searches, and sending Analytics events

Version

  • React (v16.8+) application
  • Works in node and all browsers (including IE11+)

Related Integrations

Key links


Get started

Creating the component (get a free account here)

1import { autocomplete } from '@algolia/autocomplete-js';
2import React, { createElement, Fragment, useEffect, useRef } from 'react';
3import { render } from 'react-dom';
4
5export function Autocomplete(props) {
6  const containerRef = useRef(null);
7
8  useEffect(() => {
9    if (!containerRef.current) {
10      return undefined;
11    }
12
13    const search = autocomplete({
14      container: containerRef.current,
15      renderer: { createElement, Fragment },
16      render({ children }, root) {
17        render(children, root);
18      },
19      ...props,
20    });
21
22    return () => {
23      search.destroy();
24    };
25  }, [props]);
26
27  return <div ref={containerRef} />;
28}

Mounting the autocomplete

1import React, { createElement } from 'react';
2import { getAlgoliaResults } from '@algolia/autocomplete-js';
3import algoliasearch from 'algoliasearch';
4import { Autocomplete } from './components/Autocomplete';
5import { ProductItem } from './components/ProductItem';
6
7const appId = 'latency';
8const apiKey = '6be0576ff61c053d5f9a3225e2a90f76';
9const searchClient = algoliasearch(appId, apiKey);
10
11function App() {
12  return (
13    <div className="app-container">
14      <h1>React Application</h1>
15      <Autocomplete
16        openOnFocus={true}
17        getSources={({ query }) => [
18          {
19            sourceId: 'products',
20            getItems() {
21              return getAlgoliaResults({
22                searchClient,
23                queries: [
24                  {
25                    indexName: 'instant_search',
26                    query,
27                  },
28                ],
29              });
30            },
31            templates: {
32              item({ item, components }) {
33                return <ProductItem hit={item} components={components} />;
34              },
35            },
36          },
37        ]}
38      />
39    </div>
40  );
41}
42
43export default App;

Using the component

1import React, { createElement } from 'react';
2
3export function ProductItem({ hit, components }) {
4  return (
5    <a href={hit.url} className="aa-ItemLink">
6      <div className="aa-ItemContent">
7        <div className="aa-ItemTitle">
8          <components.Highlight hit={hit} attribute="name" />
9        </div>
10      </div>
11    </a>
12  );
13}
Get started for freeExplore all developer docs

Built with React on Algolia

Frontend Tools
Code samples

Autocomplete with React InstantSearch

Typeahead dropdown menu with suggested searches built with Algolia Autocomplete and React

  • react
  • javascript
  • nodejs