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.
Download Script 
Live DemoFirst 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>";
$("#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);
// 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>";
$("#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"
},
]}}}
"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;
}
{
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;
}
hi Srini its really a great search process keep doing the good job...
ReplyDeleteHi
ReplyDeletethanks 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 ?
Hi
ReplyDeleteSo do it!
@ivOid
ReplyDeleteTry this
http://www.9lessons.info/2009/08/twitter-like-search-with-jquery-ajax.html
it 's beautiful bing api. but can i use with google api ?
ReplyDeleteI'm really glad to have found this blog!, and it
ReplyDeletereally looks interesting. thanks to the author.. your blog is VERY cool :D
Olá, tem como eu exportar os links dos resultados para uma Arry em php?
ReplyDeleteFiquem com Deus.
very good indeed
ReplyDeletethanks!!
amazing script. srini keeps going on to discover
ReplyDeleteEm php ficaria como?
ReplyDeletelike google result now bing search LoL
ReplyDeletenice nice nice
Is there any code similar to like this where we can search all three Google, Yahoo and Bing at same time ??
ReplyDelete@ashish
ReplyDeleteTry www.kokkoroko.com
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?
ReplyDeleteI will try to make one for me ;) fast search
ReplyDeleteNice script, thank you bro :)
ReplyDeleteit's very good but showing only 10 results....any idea to get more results on the page.
ReplyDeletehere is my InfiniteSearch adapted for image
ReplyDeletehttp://www.takeaweb.it/search/infinitebing.html
hey can you please mail me complete zip file of this code...am having some problem and i need it urgent
ReplyDeleteHi 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
ReplyDeleteIn other words the engine can answer for P after Px. So the result of P will come later and override the one of Px.
ReplyDeleteopen source meta search engine:
ReplyDeletehttp://sourceforge.net/projects/himetase/
for more results....change line
ReplyDeletevar bing_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid=APP_KEY&query='+keyword+'&sources=web&Web.count=30';
I insert the fine script go --> http://www.tulliomarra.it
ReplyDeleteit retries only 10 result at a time, how about paginations, and result in more pages ?
ReplyDeleteHi,
ReplyDeleteHow do I fix this error
"response.SearchResponse.Web is undefined"?
Thanks!
paginations would be very interesting (-:
ReplyDeletethnx a lot
ReplyDeletehey, 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.
ReplyDeletewoohoo, got it language specific, adopted it from search set to german: the parameter is &FORM=R5FD
ReplyDeleteIs there a way to do this with the phonebook API?
ReplyDeleteHello Srinivas,
ReplyDeleteWonderful 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 :)
hello sir,
ReplyDeleteis there any way to get bing news search by using the same script??
Thank you :)
hey,
ReplyDeleteThanx 4 this. Is there a way to make it get data directly frm the server database instead of using api?
no pagination how can i edit pagination like 1 2 3 pages or next page
ReplyDeletehow can i search google?
ReplyDeletenot google api, can i retrieve with file_get_contents and regexp?
Anybody know how to make this work with the new Azure API?
ReplyDelete