Home / Ajax / jQuery Autocomplete Search Box in PHP,MySQL
jQuery AutoComplete Search Box
Final Preview of jQuery AutoComplete Search box

jQuery Autocomplete Search Box in PHP,MySQL

In this tutorial we will create a jQuery Auto complete Search Box, Auto-complete search box are very user friendly. In this tutorial we are going to implement a Google like autocomplete search box using jQuery, PHP and MYSQL using EasyAutoComplete jQuery plugin that allows you to create interactive and user friendly jQuery Auto complete search. We will be creating a search box that automatically shows suggestion for countries.

This jQuery autocomplete gives suggestion when user start to type in search box. For every letter user type something in search box an ajax request will be made to fetch result. The remote PHP Search page will return a json array and we will manipulate that JSON data into our list.

jQuery AutoComplete Search Box
Final Preview of jQuery AutoComplete Search box

Step 1: Table Structure

Create the following table in your desired to database to implement the functionality of autocomplete search using jQuery.

Now let us dump some data into our table.

Step 2: Setting Up jQuery Search Box

Create a file and name it index.php. Download the jQuery and EasyAutoComplete jQuery Plugin from here and place it into the folder where our index.php is saved. Now add the following lines into the head of html.

Now create a textfield into the body and set EasyAutoComplete plugin using jQuery.

Step 3: Connecting to Database and Returning Result

Now create a file “autocomplete.php” in project folder.

Download Now

Share This:

About Hasnain

Check Also

untitled

Create a Quiz System in jQuery

You see online Quizes and Surveys all over the internet. Many legitimate companies offering potential …