Yahoo Instant Search with Jquery and Ajax
Wall Script
Wall Script
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;
}
web notification

14 comments:

  1. 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
  2. its nice too...hohohoho
    thank thank thank

    ReplyDelete
  3. in the name of god

    hi Srinivas,
    thank you for writing this tutorial.

    best regards,
    amin

    ReplyDelete
  4. 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
  5. Where does the JSON fit into the code?

    ReplyDelete
  6. how can i implement instant google search?

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

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

    ReplyDelete
  9. The Article is really good . thank you

    ReplyDelete

mailxengine Youtueb channel
Make in India
X