下面是显示结果方法,因为要改变UI,所以代码多一点,不过这里可以感受一下jquery中dom操作的灵活。
function DisplayResults(response) { //清空结果列表 $("#result-list").html(""); //清空翻页导航 $("#result-navigation li").filter(".nav-page").remove(); // 清空结果描述信息 $("#result-aggregates").children().remove(); //获取结果数据对象 var results = response.SearchResponse.Web.Results; //描述信息部分,即总过多少条,当前是哪些条 $('#result-aggregates').prepend("<p>检索词: " + response.SearchResponse.Query.SearchTerms + "</p>"); $('#result-aggregates').prepend("<p id=\"result-count\">当前显示 " + StartOffset(results) + " 至 " + EndOffset(results) + " 总共:" + parseInt(response.SearchResponse.Web.Total) + "</p>"); //创建结果列表,把每一项要显示的内容放在一个数组中 var link = []; //因为开启了搜索词高亮选项,这里进行高亮匹配 var regexBegin = new RegExp("\uE000", "g"); var regexEnd = new RegExp("\uE001", "g"); for (var i = 0; i < results.length; ++i) { //创建每一结果项的信息 link[i] = "<li><a href=\"" + results[i].Url + "\" title=\"" + results[i].Title + "\">" + results[i].Title + "</a>" + "<p>" + results[i].Description + "<p>" + "<p class=\"result-url\">" + results[i].Url + "</p></li>"; //搜索词加粗显示 link[i] = link[i].replace(regexBegin, "<strong>").replace(regexEnd, "</strong>"); } //在页面结果区域显示结果列表 $("#result-list").html(link.join('')); //处理导航区域 CreateNavigation(response.SearchResponse.Web.Total, results.length); }
导航部分代码比较简单,就不在这里大块的贴了,直接下载代码看吧。
下载:示例源码
另外,在MSDN的bing api部分为开发者提供了非常多的代码实例,感兴趣的可以去看。
原文:http://css9.net/jquery-ajax-bing-api-search/
本文链接:http://www.blueidea.com/tech/web/2009/6836.asp
出处:css9.net
责任编辑:bluehearts
上一页 jQuery+Bing API实现简易搜索引擎 [2] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|