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. 

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