Last few days I have been working with APIs for instant search results, I had an idea to implement a super instant search with multiple APIs like twitter, youtube, yahoo and bing. But jquery older versions doesn’t support multiple ajax call-backs, luckily I had found Jquery 1.5 has released a new method called $.when finally I have developed super fast search at kokkoroko.com.
Download Script 
Live DemoJavascript Code
Contains javascript and HTML code. $.when( yahoo(), bing()) is the method to call multiple ajax requests. Here $.when calling two functions called yahoo() and bing() callback objects $.done(yahoo_data, bing_data)
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".search_input").keyup(function()
{
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
// Yahoo Search API
var yahoo_url='http://boss.yahooapis.com/ysearch/web/v1/'+keyword+'?appid=APP_ID&format=json&callback=myData';
var bing_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid=APP_ID&query='+keyword+'&sources=web&web.count=10';
// Yahoo API
function yahoo()
{
return $.ajax({
type: "GET",
url: yahoo_url,
dataType:"jsonp",
success: function(yahoo_data)
{
}
});
}
// Bing API
function bing()
{
return $.ajax({
type: "GET",
url: bing_url,
dataType:"jsonp",
success: function(bing_data)
{
}
});
}
// Multiple Ajax Requests
$.when( yahoo(), bing()).done(function(yahoo_data, bing_data)
{
var yahoo=yahoo_data[0].ysearchresponse.resultset_web;
var bing=bing_data[0].SearchResponse.Web.Results;
// Yahoo results
if(yahoo)
{
$("#yahoo_result").html('');
$.each(yahoo, function(i,data)
{
var title=data.title;
var dis=data.abstract;
var url=data.url;
var dispurl=data.dispurl;
var final="<div class='webresult'><div class='title'><a href='"+url+"' target='_blank'>"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+dispurl+"</div></div>";
$("#yahoo_result").append(final); // Result
});
}
// Bing results
if(bing)
{
$("#bing_result").html('');
$.each(bing, function(i,data)
{
var title=data.Title;
var dis=data.Description;
var url=data.Url;
var DisplayUrl=data.DisplayUrl;
var final="<div class='webresult'><div class='title'><a href='"+url+"' target='_blank'>"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+DisplayUrl+"</div></div>";
$("#bing_result").append(final); // Result
});
}
});
});
});
</script>
// HTML code
<input type="text" class='search_input' />
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".search_input").keyup(function()
{
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
// Yahoo Search API
var yahoo_url='http://boss.yahooapis.com/ysearch/web/v1/'+keyword+'?appid=APP_ID&format=json&callback=myData';
var bing_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid=APP_ID&query='+keyword+'&sources=web&web.count=10';
// Yahoo API
function yahoo()
{
return $.ajax({
type: "GET",
url: yahoo_url,
dataType:"jsonp",
success: function(yahoo_data)
{
}
});
}
// Bing API
function bing()
{
return $.ajax({
type: "GET",
url: bing_url,
dataType:"jsonp",
success: function(bing_data)
{
}
});
}
// Multiple Ajax Requests
$.when( yahoo(), bing()).done(function(yahoo_data, bing_data)
{
var yahoo=yahoo_data[0].ysearchresponse.resultset_web;
var bing=bing_data[0].SearchResponse.Web.Results;
// Yahoo results
if(yahoo)
{
$("#yahoo_result").html('');
$.each(yahoo, function(i,data)
{
var title=data.title;
var dis=data.abstract;
var url=data.url;
var dispurl=data.dispurl;
var final="<div class='webresult'><div class='title'><a href='"+url+"' target='_blank'>"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+dispurl+"</div></div>";
$("#yahoo_result").append(final); // Result
});
}
// Bing results
if(bing)
{
$("#bing_result").html('');
$.each(bing, function(i,data)
{
var title=data.Title;
var dis=data.Description;
var url=data.Url;
var DisplayUrl=data.DisplayUrl;
var final="<div class='webresult'><div class='title'><a href='"+url+"' target='_blank'>"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+DisplayUrl+"</div></div>";
$("#bing_result").append(final); // Result
});
}
});
});
});
</script>
// HTML code
<input type="text" class='search_input' />
<div>
<div id="yahoo_result"></div>
<div id="bing_result"></div>
</div>
CSS
#yahoo_result, #bing_result
{
float:left;
width:450px;
}
.search_input
{
border:2px solid #333;
font-size:20px;
padding:5px;
width:350px;
font-family:'Georgia', Times New Roman, Times, serif;
-moz-border-radius:5px;-webkit-border-radius:5px;
}
{
float:left;
width:450px;
}
.search_input
{
border:2px solid #333;
font-size:20px;
padding:5px;
width:350px;
font-family:'Georgia', Times New Roman, Times, serif;
-moz-border-radius:5px;-webkit-border-radius:5px;
}
Grande como siempre!
ReplyDeleteGracias por este, y en general por toda la ayuda que sin saberlo nos has prestado.
Great as always!
Thanks for this, and in general for all the help you've provided to us.
@BAUS
ReplyDeleteGracias
that is awesome! Nice job. I'm just wondering why you haven't included the Google search results. Would it be possible?
ReplyDeleteNice tutorial srinivas .
ReplyDeletevisit www.learnveryday.net tutorial for beginners.
Great work of art
ReplyDeletenice sir thanks to shere
ReplyDeletei think u have a typo on bing_data inside the bing function. -ilyas
ReplyDelete@Mister Gingle
ReplyDeleteGooge Search API - Per day only 100 callbacks
good idea , but i want google search engine api
ReplyDeleteThank.
Obrigado!
ReplyDeleteVocê me ajuda muito!!!
Thanks!
You always help me!
@ilyasishak
ReplyDeleteFixed
Hi, Could it be possible to cache these results so repeated searches are faster. Also caching from such as client side instead server side. So cache is received from the client side
ReplyDeleteThis is great, BUT how do you make it jump from one page to another, as soon as you start typing???
ReplyDeleteI have been trying to figure it out for ages :(
Nice
ReplyDeletethanks
oh my ghost...
ReplyDeletewelcome kokkoroko :D
Genial este tutorial, siempre veo el blog, gracias..
ReplyDeleteThak's for tutorial.
OMG, tab... use tab....
ReplyDeleteGreat stuff but wouldn't it be a bit smarter to put a delay before searching. So if the user does not press any key for say a few hundreds of a second it begins searching.
ReplyDeleteFor me in Chromium the page lags every time I press a key because it does the javascript every time. Have seen other implementing a delay to get much smooter searching, just a thought!
Eres increible Srinivas, gracias por este magnifico blog.
ReplyDeleteYou are awesome Srinivas, thanks you for this great blog.
:)
Could you make more than one page?
ReplyDeleteAnd I think the google would be a great idea, and the delay like a Loading Image and it goes away when done.
Thanks, If you do these ill be very happy!
:)
You should try to add the delay when the page is loading like suggested, add google (If possible) and make it have more pages? When you search on it only one page is shown.
ReplyDeleteThank you! Please try these ill check back soon.
This is wonderful, thanks so much! :)
ReplyDeleteWeb Development for beginners: http://codeofaninja.blogspot.com
impressive..
ReplyDeleteThis is a nice example of latest jquery version 1.5 functionality....Good work...Keep up..:)
ReplyDeleteStill waiting for them..
ReplyDeleteI know you wouldnt have them done by now but could you say if you're going to do them in the future ?
Thanks
can you make this work with the dailymotion api too?
ReplyDeletesounds great
ReplyDeletethanks for sharing
Nice! I was kind of curious about how to implement something similar to this after reading your previous two tutorials. You beat me to it. Great Job & Thanks!
ReplyDeleteHello i thing this is an amazing idea, but i would put a search button or wait to the user to press enter for starting the query, because it starts little "agresive". Think the user could misspelled the word and want to correct it before start the query.
ReplyDeletewow. awesome !
ReplyDeletesupperv
ReplyDeleteGreate Job! However, it doesn't work if there is a timeout or the server is unreachable...
ReplyDeleteCan u add, as optional, the google api?
ReplyDeletedont seems youtube and twitter in js ?
ReplyDeleteHey This is really good .. I am really impressed good work!
ReplyDeleteCan you publish all the code? When i download this i only have 1 index page and when i save the .css file etc.it doesn't work :(
ReplyDeleteI will be very happy if you add the following files to the download file:
- index
- css
- javascript
great search engine project.
ReplyDeleteSound Great Can you get the google search
ReplyDeleteThanks for this great tutorial!
ReplyDeleteGreat idea, unfortunately your website kokkoroko.com expired last month.
ReplyDeleteThanks for this great example! Very helpful.
ReplyDeleteI will use this technique with online translators, the principle will use Google Translate and Bing Translator BeGlobal. Your example code was a great help, and logic When this command is fantastic.
ReplyDeleteGreat...very helpful.
ReplyDeleteGreat Tutorial. Many Thanks
ReplyDelete