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

or

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';

or

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

Read more


2. instatype

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);
    }
  });

}

Read more


3. react-autosuggest

Here are its features:

Installation

yarn add react-autosuggest

or

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}
      />
    );
  }
}

Read more


4. react-autocomplete

Autocomplete component for React.

Installation

Install via npm:

    % npm install @prometheusresearch/react-autocomplete

Read more


5. downshift

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>.

Read more


Categorized in: