Yahoo Instant Search with Jquery and Ajax
Wall Script
Follow Me:
Friday, February 25, 2011

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.

Yahoo Instant Search

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 
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&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;
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


14 comments:

  1. Great stuff ;)

    ReplyDelete
  2. Hi, Can you possible to make it yahoo search with time line.It will be interesting.For example last 24 hours activity,latest activity etc.

    ReplyDelete
  3. This is a great piece.

    Thanks for sharing.

    ReplyDelete
  4. its nice too...hohohoho
    thank thank thank

    ReplyDelete
  5. in the name of god

    hi Srinivas,
    thank you for writing this tutorial.

    best regards,
    amin

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

    ReplyDelete
  7. Where does the JSON fit into the code?

    ReplyDelete
  8. how can i implement instant google search?

    ReplyDelete
  9. Google Search API very limited requests per day 100 only

    ReplyDelete
  10. serhatbjk@hotmail.comMay 10, 2011 at 9:20 PM

    Demo has a turkish character problem. ğ, ü, ş, ı, ö, ç . Thanks.

    ReplyDelete
  11. The Article is really good . thank you

    ReplyDelete

Make in India