$.ajax({ type: "get", async: false, url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998", dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据 success: function(json){ alert(json.price + json.tickets + ' 张。'); }, error: function(){ alert('fail'); } });
通过这段代码来修改我们自己的代码：
$.ajax({ type: "GET", url: "http://api.bing.com/qsonhs.aspx?type=cb&q=" + searchText, dataType: "jsonp", jsonp: 'cb', success: function(data) { var d = data.AS.Results[0].Suggests; var html = ""; for(var i = 0; i < d.length; i++) { html += "<li>" + d[i].Txt + "</li>"; } $("#search-result").html(html); $("#search-suggest").show().css({ top: $("#search-form").offset().top + $("#search-form").height() + 10, left: $("#search-form").offset().left, position: "absolute", }); } })
更多思考：我们可以在前面增加一些判断，让我们的效果实现起来更完美
if(data == null) { $("#search-suggest").hide(); return false; } if(data.AS == null) { $("#search-suggest").hide(); return false; } if(data.AS.Results == null) { $("#search-suggest").hide(); return false; } if(data.AS.Results[0] == null) { $("#search-suggest").hide(); return false; } if(data.AS.Results[0].Suggests == null) { $("#search-suggest").hide(); return false; }
经过测试前面的代码，发现还有不足，进一步修改代码：
$("#search-form").submit(function() { var keyword = $("#search_input").val(); console.log("word=" + keyword); //if (keyword == null) {return false;} location.href = "http://cn.bing.com/search?q=" + keyword; });
到这里，我们的效果差不多就出来了，效果截图：
源代码已托管至：，点击即可查看。
后面的话：
这些天学习的新东西挺多的，现在有一个想法就是把最近学的东西把它串联起来，做一个综合的效果。参考必应网站，真的有好多东西已经可以做出来了，接下来的一段时间就好好的把自己想要做的效果实现好。