How to use jQuery Auto Complete in PHP and MySQL

As we know, PHP is a powerful server side programming (scripting) language through open source. In this world more than 40% of the websites are using PHP. OK fine lets go to our work now.

In this column we are gonna to know, how to embed jQuery auto suggestion by using PHP and MySQL.

Step 1:

We must download jQuery Auto complete Plugin by using this link click here. And then extract this zipped file. Finally copy jquery.autocomplete.css and jquery.autocomplete.js into your project folder.

And one more thing add your default jQuery link in your script link. Now lets start our project.

Step 2:

We have to create a new database table for this usage before we write our scripts. My Suggestion use xampp or wamp tool to create db quickly.

create db structure as shown below,

CREATE TABLE `name` (
`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, 'ahamed'),
(2, 'arun'),
(3, 'push'),
(4, 'imthy'),
(5, 'niyaz'),
(6, 'bouzy'),
(7, 'jameel'),
(8, 'cricket'),
(9, 'sachin');

Step 3:

Now we need to start our index.php script, use following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PHP jQuery Auto Complete</title>
<title>Auto Complete Input box</title>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#tag").autocomplete("suggest.php", {
selectFirst: true
});
});
</script>
</head>
<body>
<label style="padding:10px; margin:80px 0px 0px 400px;">Enter your Name : </label>
<input name="tag" type="text" id="tag" placeholder="search here" size="60" style="padding:10px; margin-top:80px;"/>
</body>
</html>

Stpe 4:

And one more script we need to write, that is suggest.php.

<?php
$q=$_GET['q'];
$my_data = mysql_real_escape_string($q);
$mysql = mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("jquery",$mysql);

$sql = mysql_query("SELECT * FROM autosuggest WHERE name like '%$my_data%' ORDER BY name") or die(mysql_error());
if($sql)
{
while($row = mysql_fetch_array($sql))
{
echo $row["name"]."\n";
}
}
?>

That is it. Now you could run this project in your browser using your local host directory.

Output would be like this screenshot

Untitled-5

Donate your comments.

4 Comments

  1. Thank you friend, very helpful, there is another example, it may help you:
    http://www.bewebdeveloper.com/tutorial-about-autocomplete-using-php-mysql-and-jquery

    ReplyDelete
  2. Thank you for every other informative website.
    Where else may just I am getting that type of info written in such a perfect means?
    I have a mission that I am simply now running on, and I
    have been on the look out for such information.

    ReplyDelete
  3. Arts and crafts help pre-school children learn basic skills like
    drawing, painting, counting and learning colours.
    Then try gentle throws until she becomes an expert in catching balls.

    Someday, somebody ought to research his life and write a book about him.
    You must remember that no time is too early to start teaching them sounds.
    For instance, topics may include colors, pets, small crafts, fun kids events and more.

    ReplyDelete

Post a Comment

Post a Comment

Previous Post Next Post