Autocomplete an input field using AJAX, PHP, MySQL and JQuery

When you are using a web form you may need to generate suggestions for users to select an option from all available options.In my example , I have assumed that i have an  input field called country.When a user types few text the webpage sends an ajax request shows the names of the countries which match with the user’s input.If user types “ind” it should show the names of the countries including keyword “ind”.

To complete the above objectives i am going to to use JQuery and Autocomplete plugin of JQuery.Here is the step by step guide-

1- Design a form-Design a simple form to get the country of user.

 2- Add JQuery and autocomplete plugin-The next step is to  add codes to includes JQuery and Autocomplete plugin and activate country field as autocomplete.In the following code i have used a PHP file “countrylist.php” which will extract the matching counties from MySQL database,you can replace this file name with your own.

Your client side codes are almost complete now save this page as form.html or any name.

3- A PHP program to get matching names from database- To fetch the names from the database you can use the following PHP script-

Don’t forget to assign the empty values of $uname  ,$pass and $db .

You can download the files used in this tutorial from here-

Download Source

  • gunawan

    mysql_select_db(“$db, $con);
    check this.. you put ‘ ” ‘ without close!!

    • admin

      Thanks ! post updated.

  • syntrax

    Now, how to do it without Jq?

  • Amit Singh

    If you do not want to use jQuery then you can use given form and java script function.