Autocomplete Library for React

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

  • InstantSearch for React, Vue, vanilla 
  • Search, Insights, and Recommend APIs

Key links


Get started

Creating the component

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}

Built with React on Algolia