React Autocomplete Search Example

React Autocomplete Search Example

React autocomplete search example; In this tutorial, you will learn how to implement autocomplete search in react js app using react-autocomplete plugin.

Apart from the react-autocomplete plugin, there are many other plugins as well. Using which you can add autocomplete search functionality to your react app.

Today 90% of the world’s population uses Google Search. You too must have used it at some point. So you must have noticed that when you type anything in the Google search bar. So automatically the recording suggestions of your keywords are shown.

Autocomplete search helps a lot in searching suggestions of users. and make the user experience better.

Now in this tutorial, you will learn step by step how to make autocomplete search bar like google in react js app using the react-autocomplete plugin.

React Autocomplete Search Tutorial Example

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

Step 1 – Create React App

In this step, 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

Add 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

In this step, execute the following command to install react-autocomplete into your react app:

npm i react-autocomplete --save

Step 4 – Create Static Data File

In this step, you need some static data. 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

In this step, visit the 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 – Add Component in App.js

In this step, you need to add 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 />  
    </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.

Recommended React JS Posts

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *