Implementing Bing Instant Search Using 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 a few lines of code, reading Bing search JSON API file with Jquery.

First, you have to create an application ID from the 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. 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;
}