This tutorial about how to display twitter like search results with jQuery and Ajax. When you click the search button the results will display on the same page. This is very interesting and simple. Take a look at beautiful live demo
Download Script 
Live DemoDatabase Details: Voting system with jQuery, Ajax and PHP.
newsearch.php
Contains javascript, PHP and HTML code. $(".submit_button").click(function(){}- submit_button is the class name of anchor tag. Using element.attr("id") calling search input value.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$(".search_button").click(function()
{
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;
if(search_word=='')
type: "GET",
url: "searchdata.php",
data: dataString,
cache: false,
beforeSend: function(html)
$("#flash").show();
$("#searchword").show();
$(".searchword").html(search_word);
$("#flash").html('<img src="ajax-loader.gif" /> Loading Results...');
success: function(html){
$("#insert_search").show();
$("#insert_search").append(html);
$("#flash").hide();
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$(".search_button").click(function()
{
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;
if(search_word=='')
{
}
else
{
$.ajax({type: "GET",
url: "searchdata.php",
data: dataString,
cache: false,
beforeSend: function(html)
{
document.getElementById("insert_search").innerHTML = ''; $("#flash").show();
$("#searchword").show();
$(".searchword").html(search_word);
$("#flash").html('<img src="ajax-loader.gif" /> Loading Results...');
},
success: function(html){
$("#insert_search").show();
$("#insert_search").append(html);
$("#flash").hide();
}
});
}
return false;
});
});
</script><form method="get" action="">
<input type="text" name="search" id="search_box" class='search_box'/>
<input type="submit" value="Search" class="search_button" />
</form>
<div id="searchword">
Search results for <span class="searchword"></span></div><div id="flash"></div>
<ol id="insert_search" class="update">
</ol>
searchdata.php
Contains simple PHP Code. Using LIKE to find the database results.
<?php
include('config.php');if(isset($_GET['search_word']))
{
$search_word=$_GET['search_word'];$search_word_new=mysql_escape_string($search_word);
$search_word_fix=str_replace(" ","%",$search_word_new);
$sql=mysql_query("SELECT * FROM messages WHERE msg LIKE '%$search_word_fix%' ORDER BY mes_id DESC LIMIT 20");
$count=mysql_num_rows($sql);
if($count > 0)
{
while($row=mysql_fetch_array($sql)){
$msg=$row['msg'];
$bold_word='<b>'.$search_word.'</b>';
$final_msg = str_ireplace($search_word, $bold_word, $msg);
?>
<li><?php echo $final_msg; ?></li>
<?php
}
}
else
{
echo "<li>No Results</li>";}
}
?>
CSS
*{margin:0;padding:0;}
list-style:none;
font-size:1.1em;
margin-top:20px
}
height:70px;
border-bottom:#dedede dashed 1px;
text-align:left;
}
border-top:#dedede dashed 1px;
height:70px;
text-align:left
}
ol.update
{list-style:none;
font-size:1.1em;
margin-top:20px
}
ol.update li
{height:70px;
border-bottom:#dedede dashed 1px;
text-align:left;
}
ol.update li:first-child
{ border-top:#dedede dashed 1px;
height:70px;
text-align:left
}
Related Post :
Auto Load and Refresh Div every 10 Seconds with jQuery.
Delete Records with Random Animation Effect using jQuery and Ajax.
Load Data while Scrolling Page Down with jQuery and PHP
Sign up for testking 640-822 online web designing training to get free access to a wider collection of php, ajex, jQuery tutorials , live demos and other testking 642-813 resources for best learning. Become expert with testking 642-832 web designing course.
Great post - thanks! I'm interested to know why you use
document.getElementById and innerHtml rather than $("insert_search").html();
thannnnnnnnnnnnnnnnnnnnnnnks
Thanks. But two word for searching not found.
Oh thx... but i have little problem. How select data from db in another charset like cp1250 ?
This doesn't work with IE
Srinivas, Hi. Thanks for posting. Is there a way to load thumbnails/avatars with the returned search results? Thanks. Rob
Very cool, thanks.
Thanks Srinvas!
Hiya,
Thanks for an easy to follow tutorial.
It works great in Firefox, but it does not work in Opera or IE as reported above.
I take that back! Works great in all browsers. :)
@Michael
Thank You
Thanks for Sharing this great tutorial...
This works well, however when the user hit the enter key instead of clicking the search button it just refreshes the page. Is there a way to capture the enter key usage?
Great work man!! I found the solution for avoid the refresh page after enter key on IE (I tested on IE 6.0)
Here it is, you have to change the following line:
$(".search_button").click(function() {
with the following:
$("form").submit(function() {
Now it works cross-browser. :)
thanks very good!!!
your table of contents you write it
hhttp://www.9lessons.info/2009/08/twitter-like-search-with-jquery-...
hihihi...broken links :D
Srinivas,
Great tutorial!
Giovanni,
Thanks a lot!! You save my day!! HAHAHA..
how to redirect search result on other page ? instead of same page ?
This is great. Thank you.
Is there a way to make the search run when the return key is pressed in IE?
Great ..
Like so much ..
tq ..
hello srinivas.. i has try to edit your javascripts... this is will make this search engine same as google instant now. i just added some setTimeout and clearTimeout functions.. btw.. you have say in fb to change
$(".search_button").click to $("#search_box").keyup
there is your edited code...
<script type="text/javascript">
$(document).ready(function() {
var search_now = function() {
var time_out = 0;
return function(callback, time) {
clearTimeout(time_out);
time_out = setTimeout(callback, time);
}
}();
$("#search_box").keyup(function() {
document.getElementById('insert_search').style.color = "grey";
search_now(function() {
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;
if(search_word=='')
{
}
else
{
$.ajax({
type: "GET",
url: "searchdata.php",
data: dataString,
cache: false,
beforeSend: function(html) {
document.getElementById("insert_search").innerHTML = '';
$("#flash").show();
$("#searchword").show();
$(".searchword").html(search_word);
$("#flash").html('<img src="ajax-loader.gif" align="absmiddle"> Loading Results...');
},
success: function(html){
document.getElementById('insert_search').style.color = "black";
$("#insert_search").show();
$("#insert_search").append(html);
$("#flash").hide();
}
});
}
return false;
},1000);});
});
</script>
Does not work in IE8.
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB0.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Tue, 14 Sep 2010 16:01:12 UTC
Message: Syntax error
Line: 22
Char: 10
Code: 0
URI: http://demos.9lessons.info/counter.html
Instant Search just replace $(".search_button").click
to
$("#search_box").keyup
Demo : http://bit.ly/axYisC
Hi Srinivas,
Is there any way to also have predictive for the users as they type just as google does. If you can help with that, will be greatly helpfull.
How to paginate this?Thanks a lot!!
Thanks
Excellent work Shrivas. Only thing I encountered is double and sometimes even tripple search results in Firefox (4.0.1), whilest the entry is only once in the database.
How would I prevent the script from executing when someone presses enter, to prevent the ?search=... from coming up.
Thank you for sharing your program. I hope my program works well too,-like yours! :)
Very useful and awesome script :) except for that pressing enter key problem .. i hope you'll have a good fix for it Sir Srinivas .. Thanks a lot and more power.
Any one plzz
say how to create a table For this Will u provide the statement's for this tutorial ah.plzzzzzz
Awesome dude
Thnx
thnks. very nice
pls can u help by giving this with asp c#?
How to create database for this
hi, i downloaded the code and run it in my computer I noticed that result in your demo is not the same as the codes result. when i tried searching two words it gives me "No Result" did you update it or something?
thanks.