Adding auto suggestion textbox with React js like Google search bar

Have you ever wondered how we are getting the suggestions in Google search bar as we type in the text?? Do you want to implement the same in your project? Then this article is for you! Yes!! we are going to implement the similar suggestion textbox which fetches value from database and provide us suggestion. Let’s dive deep.

What we are going to do?

We are going to fetch mobile make details from database and auto suggest those name below text box like below as we type in textbox,

Project overview

Prerequisite:

We may need a React app, Express server for interacting with database and Mysql as database to store the data initially.

//For creating react app named suggestion:
npx create-react-app suggestion
npm install axios
//For creating express server, create separate folder then do,
npm init //Press enter without answering any
npm i body-parser
npm i cors
npm i express
npm i mysql
npm i nodemon

For installing MySql server and workbench, please take a look at this video — link

Setting MySQL database:

Once done with MySql server and MySql workbench setup, we will create new schema named mobileMake by selecting create new schema icon(denoted on top left corner of below image) below menu bar then click apply button.

Let’s now create a table named mobileMakeList and have two columns named id and mobileName. Make sure to select AI(Auto Increment) checkbox just to have primary key in-case if needed.

Adding data into database:

Now let’s add few more columns into our table with below insert query. We are adding few list of mobile companies here,

INSERT INTO `mobileMake`.`mobileMakeList`
(`mobileName`)
VALUES
('Samsung'),('Nokia'),('Apple'),('Blackberry');

We should see all these values when we try to run select query in our database.

Making the Express server ready:

Hope you have completed the Express server installation part already. It’s time to setup server to get the response from database.

Before getting started, add type and devStart inside package.json file to import necessary packages,

"type": "module",
"devStart" : "nodemon index.js"

Create a file named index.js and add below piece of code,

Open terminal and move inside the express server folder. Then type below command,

nodemon start

You should get the server up and running with log in terminal like below,

When you hit your server with URL: http://localhost:3001/api/get/mobileMake. You will get the response in server as below,

This confirms that your database connectivity is working! Let’s move on to front-end React part.

Making front-end ready:

First let’s import the needed packages,

import Axios from 'axios'
import React from 'react';

Then let’s open the App.js file and remove all the tag, except the <div> tag. Then lets add input tag,

<div className="App">
<input name='mobile' placeholder='mobileMake' list='suggestion'></input>
</div>

Now we need to make use of <datalist> tag which will show suggestions with <option> tag based on the text we type. Let’s add it like below,

<div className="App">
<input name='mobile' placeholder='mobileMake' list='suggestion'></input>
<datalist id='suggestion'>
<option key="1" value="Nokia">Nokia</option>
<option key="2" value="Samsung">Samsung</option>
</datalist>
</div>

Adding useState & useEffect into our code:

We are now going to add useState into our code to fetch the values from database and then show options for datalist based on its array values. So let’s set the state as below,

//Adding state to get the mobile names from db
const[mobileNames,setMobileNames] = React.useState([])

Now, whenever we load the page, we may need to fetch the values from database to keep our suggestions updated. Let’s fetch those values with useEffect with below piece of code,

Now let’s iterate the array value of mobileNames and display the options like below,

<datalist id='suggestion'>
{mobileNames.map((make,index) =>{
//Parsing the array and displaying suggestion with option tag
return (<option key={index} value={make}>{make}</option>)
})}
</datalist>

So your final piece of code will look like below,

We are at final step! Have two terminals open at the same time in your IDE(One inside Express server folder and another inside React server).

Now in react app front end part, you will get the suggestions upon typing in the textbox based on the text whichever is present in the database.

React js front-end part

Hurray! we are done!

Hope this helps for you!! Happy learning ;-)