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?
I'm using it, thanks I'm from mandasa
When converting this to asp. Is it request.form("search") or request.querystring("search")
Nothing works, since I'm using LIKE it will only display the 5 first results in DB.
And how to make the resultlist on top? All page moves down below resultlist for the moment.
this information most important for me.
thanks...
it's cool..
thanks for share..
Thanks bro for sharing. Very nice article. I am going to use it for one of my project
Testing your comment box
Cool script..thanks for your share its free :)
Hi thanks alot for all your efforts
i made a new auto complete plugin for auto complete which is very simillar to the Facebook search check it out
http://blog.halwsa.net/2010/jquery-autocomplete-search/
Cheers
how cany i use it using the keyboard?
hi, thanks for this script, i have one question. for what says this error :
Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/ebox/public_html/ssss.com/search.php on line 8
?
the line 8, is while... any idea?. thanks for u help
Thanks for the this, it’s extremely extensive and useful!,do check out the link below
http://www.tutorials99.com
where all tutorials have a Higher page rank and professional.Very helpful for beginners…
Wow, thank you, this is very useful... I like it very much. Nice job =)
it is easy to make results dissappear when you click somewhere else ?
Is wonderful
Thanks...
it only suggest but you can't click the results...