React Autocomplete Search Example

Autocomplete search is a commonly used feature in modern web applications. In this tutorial, you will learn how to build an autocomplete search feature in React using the react-autosuggest library.

React Autocomplete Search Tutorial Example

Steps to implement autocomplete search on web pages or components:

Step 1 – Create React App

In this step, open your cmd and run the following command to create a new react app:

npx create-react-app react-autocomplete-search-example

This will create a new React app in a directory named react-autocomplete-search-example. Once the installation is complete, navigate to the app directory by typing the following command:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install and Set up Bootstrap

Run the following command to install bootstrap library into your react app:

npm install bootstrap --save

Set up bootstrap.min.css file in src/App.js file:

import React, { Component } from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
  return (
    <div>
      <h2>How to Create Autocomplete in React</h2>
    </div>
  );
}
export default App;

Step 3 – Install react-autocomplete

Run the following command to install npm install react-autosuggest --save into your react application:

npm install react-autosuggest --save

Step 4 – Creating the Autocomplete component

Create a new file named Autocomplete.js in the src directory and add the following code:

import React, { Component } from 'react';
import Autosuggest from 'react-autosuggest';
class Autocomplete extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      suggestions: []
    };
  }
  onChange = (event, { newValue }) => {
    this.setState({
      value: newValue
    });
  };
  onSuggestionsFetchRequested = ({ value }) => {
    const suggestions = this.getSuggestions(value);
    this.setState({
      suggestions: suggestions
    });
  };
  onSuggestionsClearRequested = () => {
    this.setState({
      suggestions: []
    });
  };
  getSuggestions = (value) => {
    const inputValue = value.trim().toLowerCase();
    const inputLength = inputValue.length;
    return inputLength === 0 ? [] : this.props.options.filter(option =>
      option.toLowerCase().slice(0, inputLength) === inputValue
    );
  };
  getSuggestionValue = suggestion => suggestion;
  renderSuggestion = suggestion => (
    <div>
      {suggestion}
    </div>
  );
  render() {
    const { value, suggestions } = this.state;
    const inputProps = {
      placeholder: this.props.placeholder,
      value,
      onChange: this.onChange
    };
    return (
      <Autosuggest
        suggestions={suggestions}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        getSuggestionValue={this.getSuggestionValue}
        renderSuggestion={this.renderSuggestion}
        inputProps={inputProps}
      />
    );
  }
}
export default Autocomplete;

Step 5 – Import the Autocomplete component

In the App.js file import autocomplete component:

import React, { Component } from 'react';
import Autocomplete from './Autocomplete';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: [
        'React',
        'Angular',
        'Vue',
        'Ember',
        'Backbone'
      ]
    };
  }
  render() {
    return (
      <div>
        <Autocomplete options={this.state.options} placeholder="Type 'r', 'a', 'v', 'e', or 'b'" />
      </div>
    );
  }
}
export default App;

Conclusion

In this tutorial, you learned how to implement an autocomplete search feature in a React app using the react-autosuggest library.

Recommended React JS Posts