Article: Ways to Implement React Autocomplete

A React component implementing autocomplete functionality is included within a number of frameworks.

• By Mensah Alkebu-Lan
• 29 August 2022

Table of Contents

• Introduction
• A Few Different React Autocomplete Implementations
• A List of Autocomplete React Components
• References

Introduction

Because of tools like Google search, app users have a genuine appreciation for autocomplete. The more characters the user types into the Google search box, the better the selectable options that are displayed below.

This functionality improves the user experience of a Web Application to be able to choose from a list of suggestions as a user begins entering info into an input field. This is why for React Developers, an Autocomplete component is a useful React component to have.

For example, should an app user really have to type in the full name of the country he resides in when entering his billing address into a form? It would make more sense for a user who lives in the United States to be able to type in the first few characters of the country and them only have to choose between options like ‘United States’ and ‘United Kingdom.’ Or maybe the user just needs the country code. In this case, the user can select ‘United States’ using Autocomplete and then the country code ‘US’ of the United States populates the input box of the form.

There are a number of ways to implement autocomplete functionality within a React Js Application. For example, in the ReactJS Github account, you’ll see a react-autocomplete project developers can use in their React projects. Unfortunately, the latest version of this library was released in 2018, and the repo has been archived by the owner.

Don’t worry, React Web Developers, there are others. We’ll discuss a few of them.

A Few Different React Autocomplete Implementations

Of course, you can create your own Autocomplete component. What ready-made components simplify is something like the implementation of event handlers.

A React component with autocomplete functionality is included within the Material UI framework. It not only includes an Autocomplete component but also exposes a useAutocomplete() hook. The Autocomplete component itself is built on that hook.

This Autocomplete Component can also be used with the Google Maps JavaScript and Google Places API. To do so, you will need a Google Maps API key.

Another way of implementing autocomplete functionality is by leveraging a search engine called Algolia. To do so you’d have to install Algolia’s @algolia/autcomplete-js library. Below is an example of an Autocomplete React component created using this library:

import { autocomplete } from '@algolia/autocomplete-js';
import React, { createElement, Fragment, useEffect, useRef } from 'react';
import { render } from 'react-dom';

export function Autocomplete(props) {
const containerRef = useRef(null);

useEffect(() => {
if (!containerRef.current) {
return undefined;
}

    const search = autocomplete({
      container: containerRef.current,
      renderer: { createElement, Fragment, render },
      ...props,
    });

    return () => {
      search.destroy();
    };
}, [props]);

return <div ref={containerRef} />;
}

Refer to the Algolia site for further details on how to implement this component.

A List of Autocomplete React Components

Below is a list of frameworks that include an Autocomplete component.

• Autocomplete from ‘@mui/material/Autocomplete’
• Autocomplete from ‘react-autocomplete’
• { Autocomplete } from ‘antd’
• { autocomplete } from ‘@algolia/autocomplete-js’

References

1. “React Autocomplete component - Material UI.” MUI, https://mui.com/material-ui/react-autocomplete/. Accessed 28 August 2022.
2. Watson, Jed. React Select, https://react-select.com/home. Accessed 28 August 2022.
3. “react-autocomplete.” npm, 11 February 2018, https://www.npmjs.com/package/react-autocomplete. Accessed 28 August 2022.
4. “AutoComplete.” Ant Design, https://ant.design/components/auto-complete/. Accessed 28 August 2022.

5. “Using Autocomplete with React

   Autocomplete.” Algolia, 15 June 2022, https://www.algolia.com/doc/ui-libraries/autocomplete/integrations/using-react/. Accessed 28 August 2022.

6. Vargas, Natalia. “How To Build an Autocomplete Component in React.” DigitalOcean, 21 December 2020, https://www.digitalocean.com/community/tutorials/react-react-autocomplete. Accessed 28 August 2022.
7. “How Google autocomplete predictions work - Google Search Help.” Google Help, https://support.google.com/websearch/answer/7368877?hl=en. Accessed 28 August 2022.