Google Like Auto Suggest Search Using PHP Ajax

By | March 26, 2013

Auto suggest search is a very important aspect in UI(User Interface). Here is the tutorial and demo for how to make google like auto suggest search using php ajax. Without auto suggest option in search functionality or in search engine, we can’t achieve user interface,  user navigation.

This search tutorial will have the following files

—  index.php
—  style.css
—  ajax.php

Database name: freeze
Table name: product
Fields in table (product):

ID – primary key with auto increment
name – varchar(50)
descr -varchar(100)

 

Google Like Auto Suggest Search Using PHP Ajax

Google Like Auto Suggest Search Using PHP Ajax

 

Stylesheet – style.css

[code type=css]
body
{
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
}
ul
{
list-style: none;
margin: 17px 20px 20px 24px;
width: 330px;
}
li
{
display: block;
padding: 5px;
background-color: #ccc;
border-bottom: 1px solid #367;
}
#content
{
padding:50px;
width:500px; border:1px solid #666;
float:left;
}
#clear
{ clear:both; }
#box
{
float:left;
margin:0 0 20px 0;
text-align:justify;
}
input[type=text]
{width:330px; height:35px;}
input[type=submit]
{
width:90px; height:35px;
}
[/code]
jQuery Coding
function fill(Value) – when we click suggested list value, this function will be called. The actual work of this function are two
1. Clicked value should be in (text box) search box
2. After we click that suggested list, list have to be hidden.

[code type=javascript]
<script type=”text/javascript”>
function fill(Value)
{
$(‘#name’).val(Value);
$(‘#display’).hide();
}

$(document).ready(function(){
$(“#name”).keyup(function() {
var name = $(‘#name’).val();
if(name==””)
{
$(“#display”).html(“”);
}
else
{
$.ajax({
type: “POST”,
url: “ajax.php”,
data: “name=”+ name ,
success: function(html){
$(“#display”).html(html).show();
}
});
}
});
});
</script>
[/code]
ajax.php – Ajax Coding
onclick=’fill()’ – when we click the suggested list in search, then fill() function will called.

[code type=php]
<?php
$query=mysql_connect(“localhost”,”root”,””);
mysql_select_db(“freeze”,$query);
if(isset($_POST[‘name’]))
{
$name=trim($_POST[‘name’]);
$query2=mysql_query(“SELECT * FROM product WHERE name LIKE ‘%$name%’ OR descr LIKE ‘%$name%'”);
echo “<ul>”;
while($query3=mysql_fetch_array($query2))
{
?>

<li onclick=’fill(“<?php echo $query3[‘name’]; ?>”)’><?php echo $query3[‘name’]; ?></li>
<?php
}
}
?>
</ul>
[/code]
index.php
[code type=php]
<?php
$query=mysql_connect(“localhost”,”root”,””);
mysql_select_db(“freeze”,$query);
?>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Freeze Search engine</title>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head> <body> <div id=”content”> <?php $val=”; if(isset($_POST[‘submit’])) { if(!empty($_POST[‘name’])) { $val=$_POST[‘name’]; } else { $val=”; } } ?> <center><img src=”freeze.PNG”></center> <form method=”post” action=”index.php”> Search : <input type=”text” name=”name” id=”name” autocomplete=”off” value=”<?php echo $val;?>”> <input type=”submit” name=”submit” id=”submit” value=”Search”> </form> <div id=”display”></div> <?php if(isset($_POST[‘submit’])) { if(!empty($_POST[‘name’])) { $name=$_POST[‘name’]; $query3=mysql_query(“SELECT * FROM product WHERE name LIKE ‘%$name%’ OR descr LIKE ‘%$name%'”); while($query4=mysql_fetch_array($query3)) { echo “<div id=’box’>”; echo “<b>”.$query4[‘name’].”</b>”; echo “<div id=’clear’></div>”; echo $query4[‘descr’]; echo “</div>”; } } else { echo “No Results”; } } ?> </div> </body> </html>[/code]   

Full Code – index.php
This full code includes above code in index.php and javascript
1. When we start to type text in textbox, jQuery keyup(function() will be triggered
2. Inside jQuery keyup function, the typed text will be sent to ajax.php
3. Ajax.php will process with the typed text, check in database field and result will be shown in display div
4. When we click the suggest list, javascript fill() function will be called. Then textbbox will have the clicked list item.

[code type=php] <?php $query=mysql_connect(“localhost”,”root”,””); mysql_select_db(“freeze”,$query); ?> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>Untitled Document</title> <link rel=”stylesheet” href=”style.css” type=”text/css”>
<script type=”text/javascript”>
function fill(Value)
{
$(‘#name’).val(Value);
$(‘#display’).hide();
}

$(document).ready(function(){
$(“#name”).keyup(function() {
var name = $(‘#name’).val();
if(name==””)
{
$(“#display”).html(“”);
}
else
{
$.ajax({
type: “POST”,
url: “ajax.php”,
data: “name=”+ name ,
success: function(html){
$(“#display”).html(html).show();
}
});
}
});
});
</script>
</head>
<body>
<div id=”content”>
<?php
$val=”;
if(isset($_POST[‘submit’]))
{
if(!empty($_POST[‘name’]))
{
$val=$_POST[‘name’];
}
else
{
$val=”;
}
}
?>
<center><img src=”freeze.PNG”></center>
<form method=”post” action=”index.php”>
Search : <input type=”text” name=”name” id=”name” autocomplete=”off”
value=”<?php echo $val;?>”>
<input type=”submit” name=”submit” id=”submit” value=”Search”>
</form>

<div id=”display”></div>
<?php
if(isset($_POST[‘submit’]))
{
if(!empty($_POST[‘name’]))
{
$name=$_POST[‘name’];
$query3=mysql_query(“SELECT * FROM product WHERE name LIKE ‘%$name%’ OR descr LIKE ‘%$name%'”);
while($query4=mysql_fetch_array($query3))
{
echo “<div id=’box’>”;
echo “<b>”.$query4[‘name’].”</b>”;
echo “<div id=’clear’></div>”;
echo $query4[‘descr’];
echo “</div>”;
}
}
else
{
echo “No Results”;
}
}
?>
</div>
</body>
</html>
[/code]

10 thoughts on “Google Like Auto Suggest Search Using PHP Ajax

  1. abhishek das

    thanks for the code. but sir i want to add some more entries on that textarea..like we add emails in To: field on gmail.how can i get that ??

    |abc@gmail.com,xyz@yahoo.com| |send|

    Reply
  2. Sobun

    I like this tutorial. It’s OK to search for English words. But there is a problem with Unicode characters. So, what can I do? Please help explain me!

    Reply
  3. Nishant

    thanx for this useful code. it really works good.
    I want to limit my suggestions to 5. how to do that. plz share

    Reply
    1. prasad k Post author

      Using this query in ajax.php on line number 7
      SELECT * FROM product WHERE name LIKE ‘%$name%’ OR descr LIKE ‘%$name%’ LIMIT 0,5

      Reply
  4. vishwanath

    I this tutorial code is very simple and easy to understand. Thanks for providing script

    Reply
  5. Abdul

    Hello! I am using your code. For some reason your code works as expected on IE, but not on Firefox or Chrome. I tried the demo and on all browsers and works fine. Can you tell me what is the difference in the code you have provided and the actual code you are using for the demo? I noticed one difference is the jquery version, I changed and still the same result. The AJAX does not work on Firefox and Chrome, but works on IE.
    Thanks, Abdul

    Reply
  6. Rajkumar

    Thank you, I was looking for this code for a long time.I have some other query also, I will let you know that

    Reply
  7. Abdul

    I figured out why AJAX was not working! Took me close to a year, but I figured it out! The site I was working on is secured and .js was not getting the query. I do not know why Internet Explorer worked and Firefox and Chrome did not. I still have not figured that out! In case anyone else has the same issue as me, save the jquery with the rest of the .php files and make the necessary changes in the .php call. All is good. Thank you!

    Reply

Leave a Reply

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

reductive-stephenville