如何使用jQuery来调用Bing(3)

http://www.itjxue.com  2015-08-02 11:13  来源:未知  点击次数: 

下面是显示结果方法,因为要改变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)
            + "&nbsp;&nbsp;总共:" + 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);
    }

导航部分代码比较简单,就不在这里大块的贴了,直接下载代码看吧。

(责任编辑:IT教学网)

更多