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
ReplyDeletedocument.getElementById and innerHtml rather than $("insert_search").html();
thannnnnnnnnnnnnnnnnnnnnnnks
ReplyDeleteThanks. But two word for searching not found.
ReplyDeleteOh thx... but i have little problem. How select data from db in another charset like cp1250 ?
ReplyDeleteThis doesn't work with IE
ReplyDeleteSrinivas, Hi. Thanks for posting. Is there a way to load thumbnails/avatars with the returned search results? Thanks. Rob
ReplyDeleteVery cool, thanks.
ReplyDeleteThanks Srinvas!
ReplyDeleteHiya,
ReplyDeleteThanks 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. :)
ReplyDelete@Michael
ReplyDeleteThank You
Thanks for Sharing this great tutorial...
ReplyDeleteThis 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?
ReplyDeleteGreat work man!! I found the solution for avoid the refresh page after enter key on IE (I tested on IE 6.0)
ReplyDeleteHere 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!!!
ReplyDeleteyour table of contents you write it
ReplyDeletehhttp://www.9lessons.info/2009/08/twitter-like-search-with-jquery-...
hihihi...broken links :D
Srinivas,
ReplyDeleteGreat tutorial!
Giovanni,
Thanks a lot!! You save my day!! HAHAHA..
how to redirect search result on other page ? instead of same page ?
ReplyDeleteThis is great. Thank you.
ReplyDeleteIs there a way to make the search run when the return key is pressed in IE?
Great ..
ReplyDeleteLike 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
ReplyDelete$(".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.
ReplyDeleteWebpage 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
ReplyDeleteto
$("#search_box").keyup
Demo : http://bit.ly/axYisC
Hi Srinivas,
ReplyDeleteIs 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!!
ReplyDeleteThanks
ReplyDeleteExcellent 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.
ReplyDeleteHow would I prevent the script from executing when someone presses enter, to prevent the ?search=... from coming up.
ReplyDeleteThank you for sharing your program. I hope my program works well too,-like yours! :)
ReplyDeleteVery 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.
ReplyDeleteAny one plzz
ReplyDeletesay how to create a table For this Will u provide the statement's for this tutorial ah.plzzzzzz
Awesome dude
ReplyDeleteThnx
ReplyDeletethnks. very nice
ReplyDeletepls can u help by giving this with asp c#?
ReplyDeleteHow to create database for this
ReplyDeletehi, 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?
ReplyDeletethanks.