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.

Download

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.

autocomplete

Please follow and like us:



Leave a Comment

Your email address will not be published. Required fields are marked *