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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
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;
}

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<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>

ajax.php – Ajax Coding
onclick=’fill()’ – when we click the suggested list in search, then fill() function will called.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?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>

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?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">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></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>

  

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<?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" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<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>

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 *

referenced-lexeme