Twitter like Search with jQuery and Ajax.
Wall Script
Follow Me:
Friday, August 07, 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.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


37 comments:

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

    ReplyDelete
  2. Thanks. But two word for searching not found.

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

    ReplyDelete
  4. This doesn't work with IE

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

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

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

    ReplyDelete
  8. Thanks for Sharing this great tutorial...

    ReplyDelete
  9. 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?

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

    ReplyDelete
  11. thanks very good!!!

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

    ReplyDelete
  13. Srinivas,
    Great tutorial!

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

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

    ReplyDelete
  15. This is great. Thank you.

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

    ReplyDelete
  16. Great ..
    Like so much ..
    tq ..

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

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

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

    to

    $("#search_box").keyup

    Demo : http://bit.ly/axYisC

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

    ReplyDelete
  21. How to paginate this?Thanks a lot!!

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

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

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

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

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

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

    ReplyDelete
  28. How to create database for this

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

    ReplyDelete

Make in India