Pages

Auto complete text box with PHP, jQuery and MySql

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.

CREATE TABLE `tag` (
  `id` int(20) NOT NULL auto_increment,
  `name` varchar(50) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

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');

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>
<script>
 $(document).ready(function(){
  $("#tag").autocomplete("autocomplete.php", {
        selectFirst: true
  });
 });
</script>
</head>
<body>
<label>Tag:</label>
<input name="tag" type="text" id="tag" size="20"/>
</body>
</html>

autocomplete.php

This file is called from our jquery script. This php script is easy to follow.
<?php
 $q=$_GET['q'];
 $my_data=mysql_real_escape_string($q);
 $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());

 if($result)
 {
  while($row=mysqli_fetch_array($result))
  {
   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

9 comments:

  1. UnknownJune 6, 2013 at 2:45 AM

    Thanks a lot..

    ReplyDelete
  2. UnknownJune 25, 2013 at 10:42 AM

    como poner una sentencia por si no hay resultados no mostrar nada.

    ReplyDelete
  3. UnknownSeptember 15, 2013 at 9:57 AM

    Thanks a lot! but i will like the results depend on the selected field in a {select tag}

    Thaks!!

    ReplyDelete
  4. UnknownFebruary 20, 2014 at 12:02 AM

    Great coding. nice information. Useful for always. Thanks for sharing this information.
    http://www.dreamdestinations.in/

    ReplyDelete
  5. UnknownOctober 27, 2014 at 1:38 AM

    How to Pass parameter in this string like : autocomplete.php?avc='here dynamic value'

    ReplyDelete
  6. UnknownJuly 14, 2016 at 10:45 PM

    Here what is 'q'? When we run the above program it's giving notice as "'q'is undefined".
    And it's not showing auto complete available tags.

    ReplyDelete
  7. UnknownJuly 14, 2016 at 10:45 PM

    Here what is 'q'? When we run the above program it's giving notice as "'q'is undefined".
    And it's not showing auto complete available tags.

    ReplyDelete
  8. UnknownJuly 14, 2016 at 10:45 PM

    Here what is 'q'? When we run the above program it's giving notice as "'q'is undefined".
    And it's not showing auto complete available tags.

    ReplyDelete
  9. SergeyMay 9, 2019 at 1:58 PM

    If you need vuforia developer you can visit this site.

    ReplyDelete

Subscribe to: Post Comments (Atom)