jQuery 串接 Bing API 打造簡易網頁搜尋引擎完整實作

前置準備

1. 申請 Bing 開發者帳號：https://bing.com/developers
2. 登入後填寫表單取得 AppID（呼叫 API 的金鑰）

API 參數說明

var AppId = "AppId=你的AppID";
var Query = "Query=" + 關鍵字(空白替換為+);
var Sources = "Sources=Web";        // 搜尋來源：Web/Image/Video...
var Version = "Version=2.0";
var Market = "Market=zh-cn";        // 地區影響結果
var Options = "Options=EnableHighlighting"; // 關鍵字高亮
var WebCount = 10;                  // 每頁筆數
var WebOffset = 0;                  // 起始偏移（0-based）

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">
      <div id="result-aggregates" class="results"></div>
      <ul id="result-list" class="results"></ul>
      <ul id="result-navigation" class="result-navigation">
        <li id="prev">&laquo;</li>
        <li id="next">&raquo;</li>
      </ul>
    </div>
    <p id="error-list"></p>
  </div>
  <div class="column last-col">
    <h3>輸入搜尋詞:</h3>
    <input id="txtQuery" type="text" title="Search Terms" />
    <button id="btnSearch" type="button">搜尋</button>
  </div>
</div>

jQuery 核心邏輯

$(function() {
    $('#btnSearch').click(function() { Search(); });
});

function Search() {
    var term = $('#txtQuery').val().replace(" ", "+");
    var params = [AppId, Query+term, Sources, Version, Market, Options,
                  "Web.Count=" + WebCount, "Web.Offset=" + WebOffset,
                  "JsonType=callback", "JsonCallback=?"];
    var url = "https://api.bing.net/json.aspx?" + params.join("&");

    $.ajax({
        type: "GET",
        url: url,
        dataType: "jsonp",          // 跨域 JSONP
        success: function(msg) { SearchCompleted(msg); },
        error: function(msg) { alert("請求失敗: " + msg.d); }
    });
}

function SearchCompleted(response) {
    var errors = response.SearchResponse.Errors;
    if (errors) { DisplayErrors(errors); return; }
    DisplayResults(response);
}

function DisplayResults(response) {
    $("#result-list").html("");
    $("#result-navigation li.nav-page").remove();
    $("#result-aggregates").empty();

    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 regexBegin = /\uE000/g, regexEnd = /\uE001/g; // 高亮標記
    var html = [];
    for (var i=0; i