React Autocomplete Search Example Tutorial

React autocomplete search example; In this tutorial, i will provide you step by step guide on how to implement autocomplete search in react js app using react-autocomplete plugin.

Autocomplete is a search feature where the search engine predicts the user’s query and provides suggestions as the user types. … Autocomplete and predictive search, often used interchangeably with terms such as autosuggest, query suggestions, and search-as-you-type, are important for driving retention and conversions.

Now in this react autocomplete search example tutorial; i will create a search form and then install react-autocomplete search libarary. Then integrate autocomplete search bar like google in react js app with react forms.

Autocomplete Search in React js Apps Example

Step 1 – Create React App
Step 2 – Install Bootstrap 4
Step 3 – Install react-autocomplete
Step 4 – Create Static Data Component File
Step 5 – Create Autocomplete Component
Step 6 – Import Autocomplete Component in App.js

Step 1 – Create React App

Open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

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

Step 2 – Install Bootstrap 4

In this step, execute the following command to install boostrap 4 library into your react app:

npm install bootstrap --save

Import 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 Select Dropdown in React</h2>
    </div>
  );
}
export default App;

Step 3 – Install react-autocomplete

Execute the following command to install react-autocomplete into your react app:

npm i react-autocomplete --save

Step 4 – Create Static Data Component File

Create static data component. So, visit the src directory of your react js app and create a static data file named dataService.js. And add the following code into it:

export function getCountry() {
  return [
{name: 'Afghanistan', code: 'AF'},{name: 'Åland Islands', code: 'AX'},{name: 'Albania', code: 'AL'},{name: 'Algeria', code: 'DZ'},{name: 'American Samoa', code: 'AS'},{name: 'AndorrA', code: 'AD'},{name: 'Angola', code: 'AO'}, {name: 'Anguilla', code: 'AI'},{name: 'Antarctica', code: 'AQ'},{name: 'Antigua and Barbuda', code: 'AG'},{name: 'Argentina', code: 'AR'}, {name: 'Armenia', code: 'AM'},{name: 'Aruba', code: 'AW'}, {name: 'Australia', code: 'AU'},{name: 'Austria', code: 'AT'},{name: 'Azerbaijan', code: 'AZ'},{name: 'Bahamas', code: 'BS'}, {name: 'Bahrain', code: 'BH'},{name: 'Bangladesh', code: 'BD'}, {name: 'Barbados', code: 'BB'},{name: 'Belarus', code: 'BY'}, {name: 'Belgium', code: 'BE'}, {name: 'Belize', code: 'BZ'}, {name: 'Benin', code: 'BJ'}, {name: 'Bermuda', code: 'BM'},{name: 'Bhutan', code: 'BT'},{name: 'Bolivia', code: 'BO'},{name: 'Bosnia and Herzegovina', code: 'BA'},   {name: 'Botswana', code: 'BW'},   {name: 'Bouvet Island', code: 'BV'},   {name: 'Brazil', code: 'BR'},   {name: 'British Indian Ocean Territory', code: 'IO'},   {name: 'Brunei Darussalam', code: 'BN'},   {name: 'Bulgaria', code: 'BG'},   {name: 'Burkina Faso', code: 'BF'},   {name: 'Burundi', code: 'BI'},   {name: 'Cambodia', code: 'KH'},   {name: 'Cameroon', code: 'CM'},   {name: 'Canada', code: 'CA'},   {name: 'Cape Verde', code: 'CV'},{name: 'Cayman Islands', code: 'KY'},   {name: 'Central African Republic', code: 'CF'},   {name: 'Chad', code: 'TD'}]
}
 
export function matchCountry(state, value) {
    console.log(state);
    console.log(value);
  return (
    state.name.toLowerCase().indexOf(value.toLowerCase()) !== -1 ||
    state.code.toLowerCase().indexOf(value.toLowerCase()) !== -1
  );

Step 5 – Create Autocomplete Component

Go to src directory of your react js app and create form component named AutocompleteComponent.js. And add the following code into it:

import React, { Component } from 'react';
import Autocomplete from  'react-autocomplete';
import { getCountry, matchCountry } from './dataService';
class AutocompleteComponent extends Component {
  state = { value: '' };
  render() {
    return (
      <div className = "card col-sm-6" style = {{ marginTop: 40, marginLeft: 50 }}>
      <div class="card-header">
        Country Name :
      </div>
      <div class="card-body">
      <form>
        <div className="form-group">
            <Autocomplete
              value={ this.state.value }
              inputProps={{ id: 'states-autocomplete' }}
              wrapperStyle={{ position: 'relative', display: 'inline-block' }}
              items={ getCountry() }
              getItemValue={ item => item.name }
              shouldItemRender={ matchCountry }
              onChange={(event, value) => this.setState({ value }) }
              onSelect={ value => this.setState({ value }) }
              renderMenu={ children => (
                <div className = "menu">
                  { children }
                </div>
              )}
              renderItem={ (item, isHighlighted) => (
                <div
                  className={`item ${isHighlighted ? 'item-highlighted' : ''}`}
                  key={ item.abbr } >
                  { item.name }
                </div>
              )}
            />
            </div>
          </form>
          </div>
      </div>
    );
  }
}
export default AutoCompleteComponent;

Step 6 – Import Autocomplete Component in App.js

Import AutoCompleteComponent.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import AutocompleteComponent from './AutocompleteComponent'
function App() {  
    
  return (  
    <div classname="App">  
      <autocompletecomponent>  
    </autocompletecomponent></div>  
  );  
}  
export default App;

Conclusion

React autocomplete search example; In this tutorial, you have learned how to implement autocomplete bar search in react js app.