Skip to main content

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 class="card-body">

<div classname="form-group">

            <autocomplete value="{" this.state.value="" }="" inputprops="{{" id:="" 'states-autocomplete'="" }}="" wrapperstyle="{{" position:="" 'relative',="" display:="" 'inline-block'="" items="{" getcountry()="" getitemvalue="{" item=""> }
              shouldItemRender={ matchCountry }
              onChange={(event, value) => this.setState({ value }) }
              onSelect={ value => this.setState({ value }) }
              renderMenu={ children =>

<div classname="menu">
                  { children }

              renderItem={ (item, isHighlighted) => (

<div classname="{`item" ${ishighlighted="" ?="" 'item-highlighted'="" :="" ''}`}="" key="{" item.abbr="" }="">
                  { }





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) {
  return ( !== -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.

Leave a Reply

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