能够拥有强大的搜索引擎是每个网站的心愿,而一个强大的搜索引擎的制作又是相当复杂和困难的,它涉及到效率,准确性和速度等诸多方面。这里介绍的搜索引擎是利用 jQuery+Bing API实现简易搜索引擎！下面来看看具体内容：
Bing API提供了三种检索结果数据类型：SOAP、XML、JSON，在示例中是通过jQuery ajax调用json数据类型接口展示数据的。下面我们来看它的实现：
准备工作：
微软通过Bing API站点向我们展示了详细的开发文档：
访问bing开发者站点，在这里也可以找到 Bing API在MSDN上的入口
使用微软的账户登录(没有只能先注册一个啦)
填写表格，获取“APP ID”(用来调用API时用的，微软要确定你是微软的开发者)
HTML部分
页面元素很简单，主要包括检索入口、结果显示区域、结果描述、错误信息显示及翻页导航五部分，下面看HTML：
以下为引用的内容：
<div class="line search-content">
<div class="column col-threefifths">
<h3 id="results-header"></h3>
<p id="results-summary"></p>
<!--结果显示区域-->
<div id="search-result">
<h3>搜索结果</h3>
<!-- 结果描述，例如总共多少条，但前是哪些条 -->
<div id="result-aggregates" class="results"></div>
<ul id="result-list" class="results">
</ul>
<!--翻页导航-->
<ul id="result-navigation" class="result-navigation">
<li id="prev">«</li>
<li id="next">»</li>
</ul>
</div>
<!--错误信息显示-->
<p id="error-list">
</p>
</div>
<!-- 搜索入口 -->
<div class="column last-col">
<h3>输入搜索词:</h3>
<p>
<input id="txtQuery" type="text" title="Search Terms" />
<button id="btnSearch" type="button" title="搜索">搜索</button>
</p>
</div>
</div>
通过jQuery调用Bing API部分
以下为引用的内容：
定义Bing API需要传入的一些参数： //申请的APP ID，这里换成你自己的。
var AppId = "AppId=31F3C13DC5D41C42D4A18F9E04DE1DEA73762186";
//通过用户输入搜索词获得检索串
var Query = "Query="
//指定检索来源类型，Bing提供了网页、视频、图片等所有类型，参考API
//这里指定的是网页类型
var Sources = "Sources=Web";
//指定API版本
var Version = "Version=2.0";
//指定所在地区，如google，每个地区搜索结果是不一样的，这里指定中国
var Market = "Market=zh-cn";
//一些选项设置，这里开启搜索结果中的搜索词高亮
var Options = "Options=EnableHighlighting";
//每页返回条数
var WebCount = 10;
//当前为第几页，从0开始的
var WebOffset = 0;
为搜索按钮绑定处理方法：
以下为引用的内容：
$(function() {
$('#btnSearch').click(function() {
//这里调用最关键的Search方法，取数据
Search();
});
});
下面来看最关键的Search部分，调用API获取结果数据：
以下为引用的内容：
$(function() {
function Search() {
//获取用户输入的搜索词，并替换空格为“+”
var searchTerms = $('#txtQuery').val().replace(" ", "+");
//将接口需要的所有参数封装为数组
var arr = [AppId, Query + searchTerms, Sources, Version, Market, Options, "Web.Count=" + WebCount, "Web.Offset=" + WebOffset, "JsonType=callback", "JsonCallback=?"];
//将参数数组拼装成url串，最终得到bing的URL Service的请求URL
var requestStr = " http://api.search.live.net/json.aspx ?" + arr.join("&");
//通过jquery ajax调用bing json数据接口
$.ajax({
type: "GET",
url: requestStr,
//指定数据类型为jsonp
dataType: "jsonp",
//调用成功后返回数据对象，并调用处理方法
success: function(msg) {
SearchCompleted(msg);
},
error: function(msg) {
alert("Something hasn't workedn" + msg.d);
}
});
}
});
我们看到在使用jquery ajax时，指定数据类型为jsonp，jsonp是一种可跨域访问的协议，我对其也不是非常清楚，可以在这里了解一下。另外 CSS9.NET 也计划在后面的文章中讲解json的相关知识，敬请关注。
再来看获取到数据后的UI处理，主要包括显示结果和显示错误信息两部分：
以下为引用的内容：
function SearchCompleted(response) {
//检查结果数据对象中的Errors对象，判断是否发生错误
var errors = response.SearchResponse.Errors;
if (errors != null) {
// 发生错误的话调用错误信息显示方法
DisplayErrors(errors);
}
else {
// 没有错误的话调用结果信息显示方法
DisplayResults(response);
}
}
下面是显示结果方法，因为要改变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);
}
