9lessons programming blog
Loading Search
9lessons Bring Friends
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;
}
Comments
{ 37 comments }
Suriya said...

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

iv0id said...

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 ?

btcorp said...

Hi

So do it!

Srinivas Tamada said...

@ivOid

Try this

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

Anonymous said...

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

DamnCoolSites said...

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

Anonymous said...

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

Fiquem com Deus.

salvaxp1 said...

very good indeed

thanks!!

Ramakrishnan said...

amazing script. srini keeps going on to discover

Anonymous said...

Em php ficaria como?

Beben Koben said...

like google result now bing search LoL
nice nice nice

Ashish said...

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

Srinivas Tamada said...

@ashish

Try www.kokkoroko.com

Anonymous said...

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?

Design Cavern said...

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

TWITROCK said...

Nice script, thank you bro :)

Young Consumer said...

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

Urbanspaceman said...

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

nayya said...

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

Anonymous said...

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

Anonymous said...

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.

Anonymous said...

open source meta search engine:

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

Anonymous said...

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

Tullio said...

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

muraliz said...

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

Anonymous said...

Hi,

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

Thanks!

Dennis Landman said...

paginations would be very interesting (-:

Tutorials and teasers said...

thnx a lot

dynamind said...

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.

dynamind said...

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

Anonymous said...

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

Anonymous said...

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 :)

jeet said...

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

Anonymous said...

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

Anonymous said...

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

Anonymous said...

how can i search google?

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

Anonymous said...

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

Post a Comment