While making a search on twitter today, I have noticed that the website repeat the search after some seconds and notify the end user if there is more result since the last time he or she made the search. Actually, it’s pretty easy to achieve this same thing using jQuery. In this small tutorial, you will learn how to auto load only part of a page content via Ajax using jQuery after every 3 seconds. I will also add a Fade out/Fade in Effect to make it look nicer .
You can view a live demo or download the code using the links below .
The few lines of code below does all the magic :
<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script>
setInterval(
function()
{
$('#content').fadeOut('slow').load('load.php').fadeIn("slow");}, 3000);
</script>
The code above will call the page “load.php” every 3000 millisecond ( 3 seconds ) and place the content in the div with id “content” .
The HTML Part :
<body> <div id="content" style="background-color:#ffffcc;font-size:24px;width:600px;margin:auto 10px;"> Please wait .. </div> </body> <html>
That’s all you need to know to implement the same “Twitter live search” .
If you still have no idea how to use it , see the example below :
<script src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script>
setInterval(
function()
{
$('#content').fadeOut('slow').load('load.php?query=<?php echo $_GET['query']; ?>').fadeIn("slow");}, 3000);
</script>
$query = mysqli_query("Select postid from post where post LIKE '%{$_GET['query']}%'");
$total_result=mysqli_num_rows($query );//This will return the number of rows in the Database
echo $total_result;
That should help now :) .Another way you could use this is in a private message system where there is a check for new messages every x seconds via ajax .IF you think a complete example including a Database/PHP will be usefull i will be glad to make one if there is enough request .Let me know in the comment section below how and where are you going to use this ? :)
{ 5 comments… read them below or add one }
I like this tutorial :)
nice tutorial..it’s very usefull….
thanks a lot.saved my time
really this was wat i am searching for.
thanks a ton lot
Hi Hyder,
I was hoping you could show the complete example including a Database/PHP for this tutorial, also was thinking maybe a nice scroller with the please wait… message would be excellent to.
Nicely done I viewed the demo and it is smooth.
Thank you
Hi,
Nice tutorial, where would the value of Query come from in your SQL query also could you provide a complete example including a Database/PHP will be usefull i will be glad to make one, I am looking for one like they have on Facebook Wall or is it the same as the twitter one ?
Regards