Best ReactJS AutoComplete Libraries

A curated list of the best AutoComplete libraries.

1. react-bootstrap-typeahead

A React-based typeahead that relies on Bootstrap for styling and was originally inspired by Twitter's typeahead.js.

It supports both single- and multi-selection and is compliant with WAI-ARIA authoring practices. Try the live examples.

Installation

npm install --save react-bootstrap-typeahead

yarn add react-bootstrap-typeahead

Include the module in your project:

import { Typeahead } from 'react-bootstrap-typeahead'; // ES2015
var Typeahead = require('react-bootstrap-typeahead').Typeahead; // CommonJS

UMD Build

Development and production builds are included in the NPM package. Alternatively, you can get them from CDNJS or unpkg.

CSS

While the component relies primarily on Bootstrap, some additional styling is needed. You should include the provided CSS file in your project:

// Import as a module in your JS
import 'react-bootstrap-typeahead/css/Typeahead.css';

<!-- Link as a stylesheet in your HTML -->
<link
  rel="stylesheet"
  href="https://unpkg.com/react-bootstrap-typeahead/css/Typeahead.css"
/>

A mobile-friendly React autocomplete component.

Demo

unsplash.now.sh (source)

Install

npm install instatype --save

Usage

import React from 'react';
import Instatype from 'instatype';

class Component extends React.Component {

  render() {
    return <Instatype requestHandler={myRequestHandler} selectedHandler={mySelectedHandler}/>;
  }
}

Props

Prop	Description
`placeholder`	Placeholder text for input
`limit`	Number of results to show in dropdown
`thumbStyle`	Set result images to "circle" or "square"
`loadingIcon`	Path to custom loading icon
`requestHandler`	Required function that fetches data, adds "image" and "name" properties to each object in the response array, and then passes data back to the instatype component. See an example requestHandler function below.
`selectedHandler`	Required function that is called when a dropdown result is clicked. This will be passed the full object initially used to populate that result in the dropdown.

Example requestHandler

requestHandlerUsers: function(query, limit, callback){

  $.ajax({
    url: "https://api.instagram.com/v1/users/search",
    dataType: "jsonp",
    data: {
      client_id: this.props.instagramClientId,
      q: query,
      count: limit
    },
    success: function(data) {
      // Instatype expects an "image" and "name" for each result
      var renamedData = data.data.map(function(result){
        result.image = result.profile_picture;
        result.name = result.username;
        return result;
      });

      callback(renamedData);
    }
  });

}

3. react-autosuggest

Here are its features:

WAI-ARIA compliant, with support for ARIA attributes and keyboard interactions
Mobile friendly
Plugs in nicely to Flux and Redux applications
Full control over suggestions rendering
Suggestions can be presented as plain list or multiple sections
Suggestions can be retrieved asynchronously
Highlight the first suggestion in the list if you wish
Supports styling using CSS Modules, Radium, Aphrodite, JSS, and more
You decide when to show suggestions (e.g. when user types 2 or more characters)
Always render suggestions (useful for mobile and modals)
Pass through arbitrary props to the input (e.g. placeholder, type, onChange, onBlur, or any other), or take full control on the rendering of the input (useful for integration with other libraries)
Thoroughly tested

Installation

yarn add react-autosuggest

npm install react-autosuggest --save

You can also use the standalone UMD build:

<script src="https://unpkg.com/react-autosuggest/dist/standalone/autosuggest.js"></script>

Basic Usage

import React from 'react';
import Autosuggest from 'react-autosuggest';

// Imagine you have a list of languages that you'd like to autosuggest.
const languages = [
  {
    name: 'C',
    year: 1972
  },
  {
    name: 'Elm',
    year: 2012
  },
  ...
];

// Teach Autosuggest how to calculate suggestions for any given input value.
const getSuggestions = value => {
  const inputValue = value.trim().toLowerCase();
  const inputLength = inputValue.length;

  return inputLength === 0 ? [] : languages.filter(lang =>
    lang.name.toLowerCase().slice(0, inputLength) === inputValue
  );
};

// When suggestion is clicked, Autosuggest needs to populate the input
// based on the clicked suggestion. Teach Autosuggest how to calculate the
// input value for every given suggestion.
const getSuggestionValue = suggestion => suggestion.name;

// Use your imagination to render suggestions.
const renderSuggestion = suggestion => (
  <div>
    {suggestion.name}
  </div>
);

class Example extends React.Component {
  constructor() {
    super();

    // Autosuggest is a controlled component.
    // This means that you need to provide an input value
    // and an onChange handler that updates this value (see below).
    // Suggestions also need to be provided to the Autosuggest,
    // and they are initially empty because the Autosuggest is closed.
    this.state = {
      value: '',
      suggestions: []
    };
  }

  onChange = (event, { newValue }) => {
    this.setState({
      value: newValue
    });
  };

  // Autosuggest will call this function every time you need to update suggestions.
  // You already implemented this logic above, so just use it.
  onSuggestionsFetchRequested = ({ value }) => {
    this.setState({
      suggestions: getSuggestions(value)
    });
  };

  // Autosuggest will call this function every time you need to clear suggestions.
  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: []
    });
  };

  render() {
    const { value, suggestions } = this.state;

    // Autosuggest will pass through all these props to the input.
    const inputProps = {
      placeholder: 'Type a programming language',
      value,
      onChange: this.onChange
    };

    // Finally, render it!
    return (
      <Autosuggest
        suggestions={suggestions}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        getSuggestionValue={getSuggestionValue}
        renderSuggestion={renderSuggestion}
        inputProps={inputProps}
      />
    );
  }
}

Autocomplete component for React.

Installation

Install via npm:

    % npm install @prometheusresearch/react-autocomplete

Primitives to build simple, flexible, WAI-ARIA compliant React
autocomplete, combobox or select dropdown components.

The problem

You need an autocomplete, a combobox or a select experience in your application
and you want it to be accessible. You also want it to be simple and flexible to
account for your use cases. Finally, it should follow the [ARIA][aria] design
pattern for a [combobox][combobox-aria] or a [select][select-aria], depending on
your use case.

This solution

The library offers a couple of solutions. The first solution, which is the one
we recommend you to try first, is a set of React hooks. Each hook provides the
stateful logic needed to make the corresponding component functional and
accessible. Navigate to the documentation for each by using the links in the
list below.

useSelect for a custom select component.
useCombobox for a combobox or autocomplete input.
useMultipleSelection for selecting multiple items
in a select or a combobox, as well as deleting items from selection or
navigating between the selected items.

The second solution is the Downshift component, which can also be used to
create accessible combobox and select components, providing the logic in the
form of a render prop. It served as inspiration for developing the hooks and it
has been around for a while. It established a successful pattern for making
components accessible and functional while giving developers complete freedom
when building the UI.

The README on this page covers only the component while each hook has its own
README page. You can navigate to the hooks page or go directly
to the hook you need by using the links in the list above.

For examples on how to use the hooks or the Downshift component, check out our docsite!

Downshift

This is a component that controls user interactions and state for you so you can
create autocomplete, combobox or select dropdown components. It uses a render
prop which gives you maximum flexibility with a minimal API
because you are responsible for the rendering of everything and you simply apply
props to what you're rendering.

This differs from other solutions which render things for their use case and
then expose many options to allow for extensibility resulting in a bigger API
that is less flexible as well as making the implementation more complicated and
harder to contribute to.

NOTE: The original use case of this component is autocomplete, however the API
is powerful and flexible enough to build things like dropdowns as well.

Installation

This module is distributed via [npm][npm] which is bundled with [node][node] and
should be installed as one of your project's dependencies:

npm install --save downshift

This package also depends on react. Please make sure you have it installed
as well.

Note also this library supports preact out of the box. If you are using
preact then use the corresponding module in the preact/dist folder. You
can even import Downshift from 'downshift/preact' 👍

Usage

[Try it out in the browser][code-sandbox-try-it-out]

import * as React from 'react'
import {render} from 'react-dom'
import Downshift from 'downshift'

const items = [
  {value: 'apple'},
  {value: 'pear'},
  {value: 'orange'},
  {value: 'grape'},
  {value: 'banana'},
]

render(
  <Downshift
    onChange={selection =>
      alert(selection ? You selected ${selection.value} : 'Selection Cleared')
    }
    itemToString={item => (item ? item.value : '')}
  >
    {({
      getInputProps,
      getItemProps,
      getLabelProps,
      getMenuProps,
      isOpen,
      inputValue,
      highlightedIndex,
      selectedItem,
      getRootProps,
    }) => (
      <div>
        <label {...getLabelProps()}>Enter a fruit</label>
        <div
          style={{display: 'inline-block'}}
          {...getRootProps({}, {suppressRefError: true})}
        >
          <input {...getInputProps()} />
        </div>
        <ul {...getMenuProps()}>
          {isOpen
            ? items
                .filter(item => !inputValue || item.value.includes(inputValue))
                .map((item, index) => (
                  <li
                    {...getItemProps({
                      key: item.value,
                      index,
                      item,
                      style: {
                        backgroundColor:
                          highlightedIndex === index ? 'lightgray' : 'white',
                        fontWeight: selectedItem === item ? 'bold' : 'normal',
                      },
                    })}
                  >
                    {item.value}
                  </li>
                ))
            : null}
        </ul>
      </div>
    )}
  </Downshift>,
  document.getElementById('root'),
)

There is also an example without getRootProps.

Warning: The example without getRootProps is not fully accessible with
screen readers as it's not possible to achieve the HTML structure suggested by
ARIA. We recommend following the example with getRootProps. Examples on how
to use Downshift component with and without getRootProps are on the
docsite.

Downshift is the only component exposed by this package. It doesn't render
anything itself, it just calls the render function and renders that. ["Use a
render prop!"][use-a-render-prop]!
<Downshift>{downshift => <div>/ your JSX here! /</div>}</Downshift>.

Best ReactJS AutoComplete Libraries

1. react-bootstrap-typeahead

Installation

UMD Build

CSS

2. instatype

Demo

Install

Usage

Props

Example requestHandler

3. react-autosuggest

Installation

Basic Usage

4. react-autocomplete

Installation

5. downshift

The problem

This solution

Downshift

Installation

Usage