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
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 ..