I received a lot of request from my readers that asked to me how to implement Autosuggestion search with jquery. I love facebook API it's neat, so I had developed Facebook like Autosuggestion user search with jQuery, Ajax and PHP. It's simple and clean just you have to change the database details.
Take a look at live demo, search word " sri "
Download Script 
Live DemoDownload the Script. Edit Config.php change the database details.
Database
create database table with name "test_user_data"
CREATE TABLE test_user_data
(
uid INT AUTO_INCREMENT PRIMARY KEY,
fname VARCHAR(25),
lname VARCHAR(25),
country VARCHAR(25),
img VARCHAR(50)
);
(
uid INT AUTO_INCREMENT PRIMARY KEY,
fname VARCHAR(25),
lname VARCHAR(25),
country VARCHAR(25),
img VARCHAR(50)
);
Auto.html
contains jquery(javascript) and HTML Code. Take a look at input field class values search
<script type="text/javascript" src="jquery.js"></script>
</script>
$(document).ready(function(){
$(".search").keyup(function()
{
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;
if(searchbox=='')
{}
else
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#display").html(html).show();
}
});
}return false;
});
});
</script>
</script>
$(document).ready(function(){
$(".search").keyup(function()
{
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;
if(searchbox=='')
{}
else
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#display").html(html).show();
}
});
}return false;
});
});
</script>
<input type="text" class="search" id="searchbox" />
<div id="display"></div>
search.php
Contains PHP code. Display search results
<?php
include('config.php');
if($_POST)
{
$q=$_POST['searchword'];
$sql_res=
mysql_query("select * from test_user_data where fname like '%$q%' or lname like '%$q%' order by uid LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$fname=$row['fname'];
$lname=$row['lname'];
$img=$row['img'];
$country=$row['country'];
$re_fname='<b>'.$q.'</b>';
$re_lname='<b>'.$q.'</b>';
$final_fname = str_ireplace($q, $re_fname, $fname);
$final_lname = str_ireplace($q, $re_lname, $lname);
?>
<div class="display_box" align="left">
<img src="user_img/
<?php echo $img; ?>" />
<?php echo $final_fname; ?>
<?php echo $final_lname; ?><br/>
<?php echo $country; ?>
</div>
<?php
}
}
else
{}
?>
Using Watermark Input plugin
To show information about the contents of a text field.
<script type="text/javascript" src="jquery.watermarkinput.js"></script>
</script>
jQuery(function($){
$("#searchbox").Watermark("Search");
});
</script>
</script>
jQuery(function($){
$("#searchbox").Watermark("Search");
});
</script>
CSS
id #diplay overflow : hidden
*{margin:0px}
width:250px;
border:solid 1px #000;
padding:3px;
}
width:250px;
display:none;
float:right; margin-right:30px;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
overflow:hidden;
}
padding:4px;
border-top:solid 1px #dedede;
font-size:12px;
height:30px;
}
background:#3b5998;
color:#FFFFFF;
}
#searchbox
{width:250px;
border:solid 1px #000;
padding:3px;
}
#display
{width:250px;
display:none;
float:right; margin-right:30px;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
overflow:hidden;
}
.display_box
{padding:4px;
border-top:solid 1px #dedede;
font-size:12px;
height:30px;
}
.display_box:hover
{background:#3b5998;
color:#FFFFFF;
}
if any queries just post a comment.
Related Posts:
Facebook like suggestions with jQuery content appears and disappears.Facebook like multi Toggle Comment Box with jQuery and PHP.
Submit multiple comment forms with jQuery and Ajax.
its cool, but cant navigate via Keyboard, i guess better to use the LIveQuery Plugin
This looks really good, I can probably use it in one of my projects, or I can try to integrate it with my wordpress blog.
Thanks for sharing this nice code!
wowww very good article . i will use this method in my new website..many many thanks.
The results disappear if you enter a space after 4 characters (search "Alex").
this is wonderful tutorial .. i read it 3 times and get a fantastic results and sure i put a
copy of this lesson on my site here www.7asryat.prnamg.net
this is the best tutorial .. i read it along times and i put a
copy of this lesson and all lessons here on my site here
www.ashrok.co.cc
can i put sql in to edurouteand read it from facebook
hi do you have mootols version of this? because where using mootols and we have problems using jquery in our site. thanks
http://myfacefriends.com
helo bro,
u have treeview load from database?
thanks
"The results disappear if you enter a space after 4 characters (search "Alex")" yes it disappear...but its really nice!!!
hi
Good example , but i think there click event is missing .
why the click event is missing..??
i stress to make it..
because i newbie in js...
please provide link event too..
Hi,
Would it be possible to show a spinner or animated .GIF while he searches?