Autocomplete is a very useful project for user’s. It gives a list of things what you are searching according to your entered text. It saves time and offer’s a list of products and services with same names. It will give user’s more ideas based on their searching.

I have a list of states in India in my SQL file you can download it from bottom so we will use the same database and try the autocomplete search.

In this tutorial you will see how we use the PHP, Jquery,Mysql for populate the list of words and phrases based on your keyword entered. In this tutorial you will see how we will use search the database using matching records entered by the user.

In this example we will use 2 files. index.php and autocomplete-search.php and some CSS for styling our list. Lets start with our index.php

Index.php

We have created a simple form which is having a textbox and a suggestion box. Suggestion box is for list based on our searched keyword.

Autocomplete-Search.php

First you have to setup the database variables.  Now just import the downloaded SQL file into your database. You will get a table named webstate. If your keyword variable is not empty than it will run the sql query. If SQL query returns any result than our while loop will create a list of State Name’s.

Jquery Part

We are using keyup function for getting the list. When you enters any character than  ajax function will send the post request to autocomplete-search.php page with variable named “keyword”.

Keyword is having the value which you enter into the box.  When your query returns any value than it will popup the list.

selectState function is used to enter the list value in textbox. After clicking the list value our list will hide and value will be entered into the textbox.

Hope you like our tutorial if you find any issue or want to ask anything related to tutorial than please comment below.

Autocomplete Textbox (2.4 KiB, 112 downloads)