Auto complete Suggestion box with PHP, jQuery and MySql

auto complete text box

 

What is Auto complete Suggestion Box?

Auto complete Suggestion box is used to filter records as a drop down list to show the best matches.

Suppose You need a search box at the home page of your website, Visitor can search anything related to the programming using this search box that You are going to be provide at your home page.

When any one start typing in search box at the same type list of words will be display below the search box that will show matching character of the words (those words are stored in database) ..

Look at the example below…

autocomplete

 

In this tutorial I am going to show you how easy to develop  a auto complete text box with PHP, jQuery and MySql.

Look at the step by step Tutorial : -

 

Step 1 : First of all you need to create a folder in your local server (xampp or wamp), You can name this folder ‘autocomplete’..

Step 2 :  download the autocomplete jQuery files ,  Extract the files that you downloaded and copy only 3 files(jquery.autocomplete.js, jquery.js, jquery.autocomplete.css) into your  ‘autocomplete ‘ folder

Your directory structure look like this …

autocomplete(main folder)

->jquery.autocomplete.js

->jquery.js

->jquery.autocomplete.css

 

Step 3 :  Creating Mysql database table 

Now, you need to create a table in our database(if you already have otherwise create a new database) before using this  script. I am also giving you sample data for this table. Run following SQL statement via phpMyAdmin or any other MySQL tool.

 

 

 

After creating table lets move to the next step …

Step 4  : Now, let’s create a file namely ‘index.php’ inside the ‘autocomplete’ folder. Just write down(copy and paste) the code given below…

 

Step 5 :  Now, Lets create a another file

autocomplete.php

This file is called from our jquery script. Look at the code below….

 

 

Step 6 :  We have almost done !!! Now you just need to run your project, Just navigate your browser (localhost/autocomplete)

and start typing in input box… I think your auto complete text box working fine…

You can download complete script from here.. Download Script

If you have any question related to the same .. don’t hesitate in asking me in comment section…. :)

 

happy wheels

Share with Friends

One thought on “Auto complete Suggestion box with PHP, jQuery and MySql

  1. raghul

    ur script is awesome!!!! i have small dout!!
    after entering a letter it shows a suggestions…. when mouse is clicked outside.. the suggestion window disappears!! how to rectify that???

Comments are closed.