Auto complete text box with PHP, jQuery and MySql

Thursday, May 17, 2012
In this tutorial I want to show you how easy to do a auto complete text box with PHP, jQuery and MySql.

Firstly download the autocomplete jQuery plugin and extract it to your hard drive.
And then create a folder in your localhost. Copy jquery.autocomplete.css and jquery.autocomplete.js file to your project folder. And you will also need jquery.js. Now we can start our project.

Creating database table

We need to create a table in our database before writing our script. I also add some data for this table. Import following SQL statement via phpMyAdmin or any other MySQL tool.

  `id` int(20) NOT NULL auto_increment,
  `name` varchar(50) NOT NULL,
  PRIMARY KEY  (`id`)

INSERT INTO `tag` (`id`, `name`) VALUES
(1, 'php'),
(2, 'php frameword'),
(3, 'php tutorial'),
(4, 'jquery'),
(5, 'ajax'),
(6, 'mysql'),
(7, 'wordpress'),
(8, 'wordpress theme'),
(9, 'xml');


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto Complete Input box</title>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
  $("#tag").autocomplete("autocomplete.php", {
        selectFirst: true
<input name="tag" type="text" id="tag" size="20"/>


This file is called from our jquery script. This php script is easy to follow.
 $mysqli=mysqli_connect('localhost','username','password','databasename') or die("Database Error");
 $sql="SELECT name FROM tag WHERE name LIKE '%$my_data%' ORDER BY name";
 $result = mysqli_query($mysqli,$sql) or die(mysqli_error());

   echo $row['name']."\n";
We have done. Run your project and type in your text box you will see following screenshot.

By the way, I use the old jquery plug in this project. If you want to learn new thing, you can learn here and here. I create this tutorial because it is still useful and easy, although it is too old. I will also write about new jquery ui later.
Download Source Code


  1. Thank you for sharing... great job ! would be cool explain how to improve some css customization

  2. Thanks for sharing really cool work

  3. he please, on mouse click event this code is not working properly please can any one help me.


  4. How do you increase the number of items in the list?

  5. Embu Tido: You make a "Limit 20" or another number, in the end of your SQL-statement, I quess.

  6. Hello everyone, I would like to know how to implement urls results by searching the database, so that when clicked, open the reference page. Could you help me?

  7. This comment has been removed by the author.

  8. hi thank you for your code but this code does not work for table that contains larger records.

  9. please provide jquery.autocomplete.js,jquery.js,jquery.autocomplete.css files

  10. Sorry but it is not working for me as well , maybe large amount of Data

    can you provide some suggestions Plz !

  11. Hi,
    Amount of data is a problem. I thing "JQuery" should come up with a solution to this problem. Meanwhile you can try a work around. You can assign a value to the "minLength:" method to filter the data extracted from the database and help JQuery's AJAX method function properly. It also makes sense. If number of rows fetched is more than the screen length, it might look awkward. So I suggest, that you assign a value like "minLength: 4". I am sure this will come as a great relief for everyone.

    Arun @

  12. sorry dear its not working properly .. please provide another code..
    thanks for try

  13. Is there a way to add autosend form after selecting from dropdown generated by autoselect?

  14. Good job man...
    But I have 2 Questions. What would be edited if
    1. I want to perform search after typing 6 or 8 characters?
    2. And typed character automatically changed into upper case?

  15. Ok I got the solution of first question that is in "minChars:" and trying for finding solution of next question.

  16. hi i have a question i want to send id with this how can it possible ....

  17. please tell me and i want to get this id in hidden field after sending so please tell me the solution for that i m in trouble . :(

  18. how can I more than one auto suggest in a a single page.Please suggest.

  19. Thanks for sharing
    Sharing is caring

  20. hey guys how can i submit form when i select one of the autocomplete result help me..

  21. finally i found solution for above problem
    find and hide the following lines in your jquery.js

    // stop default to prevent a form submit, Opera needs special handling
    // blockSubmit = false;
    // return false;

    /* var blockSubmit;

    // prevent form submit in opera when selecting with return key
    $.browser.opera && $(input.form).bind("submit.autocomplete", function() {
    if (blockSubmit) {
    blockSubmit = false;
    return false;
    }); */

  22. i need the value for other page what i selected any one can help

  23. Notice: Undefined index: kkk in C:\xampp\htdocs\myfiles\auto.php on line 2
    ajax jquery mysql php php frameword php tutorial wordpress wordpress theme xml

  24. Great coding. Great job. I am learn for many information about your article. Thank you for sharing...

  25. In autocomplete.php the third line is: $my_data=mysql_real_escape_string($q);
    Mysql_real_escape_string() is deprecated function. But this autocomplete don't
    work properly with mysqli_real_escape_string() function, can't find upper case
    letters. Is there some solution?

  26. This comment has been removed by the author.

  27. how to do the sategory and sucategory in me

  28. Great tutorials. nice explanations. Thanks for sharing this information.

  29. hi please tell me how to implement this in a form
    I mean you are entering data in one text box and dta willl be entered automatically in next text box.
    I am entering the zip code of a specific city in one text box and automatically the respective city will come in the city text box.
    Please tell me the code in PHP connected with MYSQL database as the above one .




  30. Thank you friend, very helpful, there is another example, it may help you:

  31. php code for photo tagging with demo and database