Yahoo Instant Search with Jquery and Ajax

Yahoo instant search implementing with Yahoo Search Boss API using jquery and ajax. This is very similar to my previous post just changing few lines of code. I feel Yahoo search results better than Bing results. Use it and make your own search application.

 Download Script     Live Demo

Create Yahoo boss search application ID from Yahoo Developer Network.

Javascript Code
$(".search_input").keyup(function(){})- search_input is the class name of input tag. $(this).val() - calling the input search box value. The encodeURIComponent()function encodes special characters (More infomation). Replace your Yahoo Boss Search APP_ID

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/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 
varyahoo_url='http://boss.yahooapis.com/ysearch/web/v1/'+keyword+'?appid=APP_ID&format=json&callback=myData';

$.ajax
({
type: "GET",
url: yahoo_url,
dataType:"jsonp",
success: function(response)
{
$("#result").html('');
if(response.ysearchresponse.resultset_web)
{
$.each(response.ysearchresponse.resultset_web, function(i,data)
{
var title=data.title;
var dis=data.abstract;
var url=data.url;


var final="<div class='webresult'><div class='title'><a href='"+url+"'>"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+url+"</div></div&gt;";

$("#result").append(final); // Result

});
}
else
{
$("#result").html("<div id='no'>No Results</div>");
}
}
});
});
});
</script>
// HTML code
<input type="text" class='search_input' />
<div id="result">
</div>

Yahoo Boss JSON file
JSON file keyword

myData
({
"ysearchresponse":
{
"responsecode":"200",
"nextpage":"\/ysearch\/web\/v1\/google?format=json&count=10&appid=DFkOm6jIkY58gnDq55gbs97xEKE13w--&start=10&callback=myData",
"totalhits":"362383977",
"deephits":"2380000000","count":"10","start":"0",
"resultset_web":[
{
"abstract":"<b>Google<\/b> allows users to search the Web for images, news, products, video, and other content.",
"clickurl":"http:\/\/lrd.yahooapis.com\/_ylc=X3oDMTQ4a29i-\/SIG=10rsb6kpv\/**http%3A\/\/www.google.com\/",
"date":"2011\/02\/25",
"dispurl":"www.<b>google.com<\/b>",
"size":"25121",
"title":"<b>Google<\/b>",
"url":"http:\/\/www.google.com\/"
},
]}})

CSS

#container
{
margin:0 auto;
width:700px;
}
.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;
}
#input_box
{
text-align:left;
width:640px;
}
#result
{
text-align:left;
}
.title
{
color:#006699;
font-size:16px;
padding-bottom:5px;
}
.title a
{
color:#cc0000;
text-decoration:none;
}
.desc
{
color:#333;
padding-bottom:5px;
}
.url
{
color:#006600;
}
.webresult
{
margin-top:10px;
padding-bottom:10px;
padding-left:5px;
border-bottom:1px dashed #dedede;
}