Vous avez déjà surement remarqué lorsque vous faites une recherche sur Google, qu’il y a la possibilité d’activer la recherche instantanée, nous allons voir comment faire pareil avec Bing a l’aide de jQuery et un peu d’Ajax.

Premièrement, il faut vous créez une application sur le centre de développement Bing.

Connectez-vous avec votre compte live et laissez-vous guider, rien de compliqué, validez et mettez de côté l’AppID qu’il vous renvoi.

Code Javascript :

Remplacez APPID par la votre.

On interroge Bing qui nous renvoi au format Json.

On y récupère la description, le titre et l’url pour chaque ligne retournée.



















































<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=APPID&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>

Code CSS :






















































<strong>#container</strong>
 {
 margin:0 auto;
 width:700px;
 }
 <strong>.search_input</strong>
 {
 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;
 }
 <strong>#input_box</strong>
 {
 text-align:left;
 width:640px;
 }
 <strong>#result</strong>
 {
 text-align:left;
 }
 <strong>.title</strong>
 {
 color:#006699;
 font-size:16px;
 padding-bottom:5px;
 }
 <strong>.title a</strong>
 {
 color:#cc0000;
 text-decoration:none;
 }
 <strong>.desc</strong>
 {
 color:#333;
 padding-bottom:5px;
 }
 <strong>.url</strong>
 {
 color:#006600;
 }
 <strong>.webresult</strong>
 {
 margin-top:10px;
 padding-bottom:10px;
 padding-left:5px;
 border-bottom:1px dashed #dedede;
 }