Autocomplete Example Using React

This tutorial help to create autocomplete component example using reactjs. We will create a simple reactjs application, and add an input box that populates autosuggestion values. The traditional option list will have all options without a filter, but the suggestion provides a filter list of options. It provides a list of suggestions based on a user’s input.

When the user inputs the character into the input box, We will filter the results and display the suggestions to the user. A user can then hit enter to complete the word of phrase.

Simple Autocomplete Example in React

Let’s create a simple reactjs application that will have autocomplete component. We will show auto-suggestion for country input fields.

We will use react-autocomplete package to create autocomplete into react application.

Checkout Other tutorials:

Create React Application

Let’s create react application autocomplete-react-app using command line. We can create an app using the below command –

create-react-app new autocomplete-react-app

How To Install react-autocomplete

We will install react-autocomplete package into our react application. The npm help to install package into react app. Now, cd into the autocomplete-react-app folder and run the below command.

npm install --save react-autocomplete

How To Install Bootstrap 4 For React

We will install the bootstrap package into our react application for UI. You can skip, if you don’t need, You can install bootstrap 4 using below command.

npm install --save bootstrap

We need to add the below entry into index.js file –

import 'bootstrap/dist/css/bootstrap.min.css';

Create Autocomplete React Component

Let’s open app.js file and add the below code into this file –

import React, { Component } from 'react';
import Autocomplete from  'react-autocomplete';
import { getCountry, matchCountry } from './dataService';
import './App.css';

class App 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>

              )}
            />
            </autocomplete></div>

          </form>
</div>

</div>

    );
  }
}

export default App;

Create Service File into React App

Let’s create dataService.js file which is a data service file and added the below methods into this file –

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

The getCountry() method returns the country data in an array of objects. The matchCountry() method will use to match the user input string and return the state of country data.