9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Friday, August 7, 2009

Twitter like Search with jQuery and Ajax.

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

Twitter like Search with jQuery and  Ajax.

Download Script     Live Demo

Database 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=='')
{
}
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;}
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.
Comments
{ 37 comments }
andyprice70 said...

Great post - thanks! I'm interested to know why you use
document.getElementById and innerHtml rather than $("insert_search").html();

khalif said...

thannnnnnnnnnnnnnnnnnnnnnnks

Anonymous said...

Thanks. But two word for searching not found.

exik said...

Oh thx... but i have little problem. How select data from db in another charset like cp1250 ?

Anonymous said...

This doesn't work with IE

Robert Visser said...

Srinivas, Hi. Thanks for posting. Is there a way to load thumbnails/avatars with the returned search results? Thanks. Rob

Henrique said...

Very cool, thanks.

Anonymous said...

Thanks Srinvas!

Michael said...

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.

Michael said...

I take that back! Works great in all browsers. :)

Srinivas Tamada said...

@Michael

Thank You

M <> Faizan Khan said...

Thanks for Sharing this great tutorial...

Anonymous said...

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?

Giovanni said...

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

Anonymous said...

thanks very good!!!

Beben said...

your table of contents you write it
hhttp://www.9lessons.info/2009/08/twitter-like-search-with-jquery-...
hihihi...broken links :D

Tina said...

Srinivas,
Great tutorial!

Giovanni,
Thanks a lot!! You save my day!! HAHAHA..

Yash said...

how to redirect search result on other page ? instead of same page ?

Anonymous said...

This is great. Thank you.

Is there a way to make the search run when the return key is pressed in IE?

iRvan said...

Great ..
Like so much ..
tq ..

andy said...

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">&nbsp;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>

kamil said...

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

Srinivas Tamada said...

Instant Search just replace $(".search_button").click

to

$("#search_box").keyup

Demo : http://bit.ly/axYisC

mayur said...

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.

Anonymous said...

How to paginate this?Thanks a lot!!

Anonymous said...

Thanks

Anonymous said...

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.

Anonymous said...

How would I prevent the script from executing when someone presses enter, to prevent the ?search=... from coming up.

HANNY said...

Thank you for sharing your program. I hope my program works well too,-like yours! :)

Adam said...

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.

G.J Ramanaa said...

Any one plzz
say how to create a table For this Will u provide the statement's for this tutorial ah.plzzzzzz

Mahasish Shome said...

Awesome dude

Anonymous said...

Thnx

Anonymous said...

thnks. very nice

Anonymous said...

pls can u help by giving this with asp c#?

ani said...

How to create database for this

Saturday Update said...

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.

Post a Comment