Bing Instant Search with Jquery and Ajax
Wall Script
Follow Me:
Thursday, February 24, 2011

Bing Instant Search with Jquery and Ajax

Some days back I had posted a popular article 'Youtube instant search with Jquery and Ajax'. I received a lot of request from my readers that asked to me how to instant web search results so I had coded Bing instant search with real time search results. Just few lines of code, reading Bing search JSON API file with Jquery.

Bing Instant Search

Download Script     Live Demo

First you have to create an application ID from Bing Developer Center.

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 Bing 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);
// Bing Search API 
var bing_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid=APP_KEY&query='+keyword+'&sources=web';

$.ajax
({
type: "GET",
url: bing_url,
dataType:"jsonp",
success: function(response)
{
$("#result").html('');
if(response.SearchResponse.Web.Results.length)
{
$.each(response.SearchResponse.Web.Results, function(i,data)
{
var title=data.Title;
var dis=data.Description;
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>

Bing JSON file
JSON file keyword
{
"SearchResponse":
{
"Version":"2.2",
"Query":
{
"SearchTerms":"srinivas tamada"
},
"Web":
{
"Total":2010,
"Offset":0,
"Results":[
{
"Title":"Srinivas Tamada",
"Description":"Current. CEO at Egglabs. Dr M.G.R University Recommendations 1 recommendation Connections",
"Url":"http:\/\/www.linkedin.com\/in\/srinivastamada",
"CacheUrl":"http:\/\/cc.bingj.com\/cache.aspx?q=srinivas+tamada",
"DisplayUrl":"www.linkedin.com\/in\/srinivastamada",
"DateTime":"2011-02-11T08:26:00Z"
},

]}}}

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;
}

37 comments:

  1. hi Srini its really a great search process keep doing the good job...

    ReplyDelete
  2. Hi

    thanks you for this tutorial but i have a question, can we change the code so that the results came from a database that we created ?

    ReplyDelete
  3. @ivOid

    Try this

    http://www.9lessons.info/2009/08/twitter-like-search-with-jquery-ajax.html

    ReplyDelete
  4. it 's beautiful bing api. but can i use with google api ?

    ReplyDelete
  5. I'm really glad to have found this blog!, and it
    really looks interesting. thanks to the author.. your blog is VERY cool :D

    ReplyDelete
  6. Olá, tem como eu exportar os links dos resultados para uma Arry em php?

    Fiquem com Deus.

    ReplyDelete
  7. amazing script. srini keeps going on to discover

    ReplyDelete
  8. Em php ficaria como?

    ReplyDelete
  9. like google result now bing search LoL
    nice nice nice

    ReplyDelete
  10. Is there any code similar to like this where we can search all three Google, Yahoo and Bing at same time ??

    ReplyDelete
  11. I'm trying to use this for an image search, but can't seem to figure out how to get a thumbnail image for a result. Any suggestions?

    ReplyDelete
  12. I will try to make one for me ;) fast search

    ReplyDelete
  13. Nice script, thank you bro :)

    ReplyDelete
  14. it's very good but showing only 10 results....any idea to get more results on the page.

    ReplyDelete
  15. here is my InfiniteSearch adapted for image
    http://www.takeaweb.it/search/infinitebing.html

    ReplyDelete
  16. hey can you please mail me complete zip file of this code...am having some problem and i need it urgent

    ReplyDelete
  17. Hi is there an insidious bug in the code? It seems to me that you are assuming that the callback launched for the prefix P will conclude before the callback launched for the string Px (i.e. the prefix P followed by the character x). If this is the case, there is no guarantee for this

    ReplyDelete
  18. In other words the engine can answer for P after Px. So the result of P will come later and override the one of Px.

    ReplyDelete
  19. open source meta search engine:

    http://sourceforge.net/projects/himetase/

    ReplyDelete
  20. for more results....change line
    var bing_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid=APP_KEY&query='+keyword+'&sources=web&Web.count=30';

    ReplyDelete
  21. I insert the fine script go --> http://www.tulliomarra.it

    ReplyDelete
  22. it retries only 10 result at a time, how about paginations, and result in more pages ?

    ReplyDelete
  23. Hi,

    How do I fix this error
    "response.SearchResponse.Web is undefined"?

    Thanks!

    ReplyDelete
  24. paginations would be very interesting (-:

    ReplyDelete
  25. hey, the things you do are really impressive, is their a parameter for language specific search filtering? I'm getting a lot results in chinese and so on, things I can't read.

    ReplyDelete
  26. woohoo, got it language specific, adopted it from search set to german: the parameter is &FORM=R5FD

    ReplyDelete
  27. Is there a way to do this with the phonebook API?

    ReplyDelete
  28. Hello Srinivas,
    Wonderful tutorial as always. I need a little help. I am able to successfully implement bing instant web search, image search, looking forward to implement bing instant news search now. Can you guide me? A link where I can get some hints would be enough
    Thank you :)

    ReplyDelete
  29. hello sir,
    is there any way to get bing news search by using the same script??
    Thank you :)

    ReplyDelete
  30. hey,
    Thanx 4 this. Is there a way to make it get data directly frm the server database instead of using api?

    ReplyDelete
  31. no pagination how can i edit pagination like 1 2 3 pages or next page

    ReplyDelete
  32. how can i search google?

    not google api, can i retrieve with file_get_contents and regexp?

    ReplyDelete
  33. Anybody know how to make this work with the new Azure API?

    ReplyDelete