Bing API的简单了解(3)
下面是显示结果方法,因为要改变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部分为开发者提供了非常多的代码实例,感兴趣的可以去看。