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 DemoCreate 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
var yahoo_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>";
$("#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>
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
var yahoo_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>";
$("#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\/"
},
]}})
({
"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;
}
{
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;
}
Great stuff ;)
ReplyDeleteHi, Can you possible to make it yahoo search with time line.It will be interesting.For example last 24 hours activity,latest activity etc.
ReplyDeletehell yeah! greetings from mexico
ReplyDeleteThis is a great piece.
ReplyDeleteThanks for sharing.
its nice too...hohohoho
ReplyDeletethank thank thank
Nice info...
ReplyDeleteEasy to implement.. Thanks!
ReplyDeletein the name of god
ReplyDeletehi Srinivas,
thank you for writing this tutorial.
best regards,
amin
I am having trouble with the json as I would like for it to return 20 results. In the demo, when I do another search and clear the search box, the results do not disappear. How would this be done? Your updates are awesome and very helpful!
ReplyDeleteWhere does the JSON fit into the code?
ReplyDeletehow can i implement instant google search?
ReplyDeleteGoogle Search API very limited requests per day 100 only
ReplyDeleteDemo has a turkish character problem. ğ, ü, ş, ı, ö, ç . Thanks.
ReplyDeleteThe Article is really good . thank you
ReplyDelete