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..

    1. just call a function on onClick


  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

  32. You can refer to the source code here

  33. It's Working Great... That's exact I am searching for. Thanks a lot. Thanks again.

  34. itz not working with firefox and explorer....only works with chrome.

  35. try this simple code

  36. It's great code thanku so much,
    can you help me for two text filed serach in one table of database plz

  37. hai, its working fine. but if my need is to autocomplete the characters which starts with what i entered.and also dosent matter about lower/upper. how it could be achived. please help my to resolve

  38. i need a slight change in this code..i need a prediction for each user...have a column "user" in my table

  39. how can i add <a href="""... to redirect it to another page, with the value?
    please help me!

  40. How to send extra parameter in your code ?

  41. How to send extra parameter in your code ?

  42. Nice blog...Very useful information is providing by ur blog. Great beginning php tutorials Very clear and helpful for beginners.

  43. how can i add this feature to angularjs file app.js ..can u plzz send me the code as soon as possible

  44. How can we get variable 'q' in autocomplete.php

  45. What is the value of 'q' here.? It is showing undefined symbol warning and didnt get any suggestions in the textbox..

  46. in my SQL database, my PHP codes, all are defined with UTF-8, but when querying in your script, it appears that problem. Thanks again

  47. hi. i am using this code in my application. its working fine. but my client is asking how to search first letter of word only. like if enter letter 'a' it will display words starting with 'a'. but not with matching letters. is this possible? pls help me.

    1. In your autocomplete.php update the %$my_data% in the sql query to $my_data%

  48. Good efforts. All the best for future posts. I have bookmarked you. Well done. I read and like this post. Thanks. graphic designing courses in jalandhar

  49. Agilestorelocator is a premium WordPress plugin that is using Google Maps API V3 to render Stores List with markers to find location on Google Map. Get Plugin is for WordPress easily. Here are options for the Store Locator WordPress, Location finder WordPress, plugin is for WordPress.

  50. We are providing the services in wordpress to store locator plugin. You can get store locator wordpress through this and also google store locator. We are giving the administrations in wordpress to store locator module. You can get google store locator? through this furthermore google store locator.

  51. I was looking for an online writer who offers Master’s Thesis Literature Review errors Correcting Help before I landed on this page. I have enjoyed reading the article and the comments and I will bookmark this site and visit occasionally to read both new and old articles. Thanks for posting this interesting and intriguing article.