發行項
04/14/2015

本文章是由機器翻譯。

技術最前線

自動提示

Dino Esposito 自互聯網的早期，大多數頁面功能的搜索框中，以説明您快速找到在頁面本身或在網站上的內容。對大型網站而言，成熟的搜尋功能是必備的功能。這可以説明使用者找到他們想要的什麼，迅速而輕鬆地繞過網站地圖和體系結構。

在一個購物網站，例如，可能要使用查詢字串來查找產品、服務或消息和警報。在對某些事物如專業運動團隊建立一個網站，搜索功能必須能夠挖出新聞、結果、運動員的名字、 bios 和等等。資料結構賴以搜索功能已工作永遠不會是顯而易見的。它是明確特定于應用程式。

而不是每次都重新發明輪子，考慮使用特設的全文搜尋引擎，如 Lucene.Net 來備份你的搜索功能。引擎像 Lucene.Net 一系列基於字串的檔進行索引，並針對索引任何給定的查詢字串。在這樣做的時候，引擎允許您指定查詢字串的複雜組合。許多網頁和網站，Lucene.Net 可能是大材小用，但他們仍然需要某種類型的聰明比在一個下拉清單中放置一個無盡的專案清單的搜索。

這篇文章將自動完成圍繞 Twitter typeahead.js 的一個小的框架。這一框架並不神奇，但它確實簡化了在 Web 頁中使用自動完成。這一框架的最誘人的方面是它允許您合併多個資料集的同一頁面中的查詢和檢索不同但相關的資訊。

設置 Typeahead.js

這篇文章，我會作出澄清在使用上的版本的你找到的 typeahead NuGet 鍵入"typeahead，"時中所示的現實場景中使用 typeahead 的基本操作圖 1。當你在谷歌搜索 typeahead 時，您可能會遇到舊引用、較舊的 JavaScript 檔或只是分叉的版本的原始專案代碼。文檔也誤導。

圖 1 為 Twitter Typeahead.js NuGet 套裝程式

包檔包含組成的庫，包括獵犬號引擎來管理本地瀏覽器的提示的所有套裝軟體。若要設置 Web 頁或剃刀視圖使用 typeahead.js，只是需要大家熟悉的 jQuery 類似語法中，和在所選的輸入欄位上啟動該外掛程式。下面是一個示例：

< 形成 action="@Url.Action （"查詢"、"回家"）" 方法 ="post">

< 輸入類型 ="隱藏" id ="queryCode" 名稱 ="queryCode" / >

< 輸入類型 ="文本" 名稱 ="查詢字串" id ="查詢字串">

< 按鈕 id ="queryButton" 類型 ="提交"> < / 按鈕 >

</表格 >

<form action="@Url.Action("Query", "Home")" method="post">
  <input type="hidden" id="queryCode" name="queryCode" />
    <input type="text" name="queryString" id="queryString">
    <button id="queryButton" type="submit">Get</button>
</form>

它是重要的是要注意要使用自動完成 Web 頁上的一些有用的東西，你還需要一個隱藏的好友欄位來收集某種選定提示的唯一 ID。有很多情況下，在其中您可以考慮使用自動完成的輸入的欄位。我很感興趣的場景使用自動完成功能以替換否則為無休止的下拉清單。它使重量輕，Bing 樣式搜索在你的網站，而無需像 Lucene.Net 這樣的全文引擎的説明。

要在視圖中的腳本代碼

若要使用 typeahead.js，請引用 jQuery 1.9.1 或上級和 typeahead 腳本。少量的代碼你你需要在視圖中所示：

$('#queryString').typeahead(
  null,
  {
    displayKey: 'value',
    source: hints.ttAdapter()
  }
});

在這樣做時，你採取所有預設設置並指示引擎使用 value 屬性中返回的資料填充下拉清單。名為 value 屬性被假定存在於您篩選的任何資料。在理論上，您可以設置自動完成對資料的任何 JavaScript 陣列。在實踐中，雖然，自動完成功能意義大多是從遠端源下載資料。

從一個遠端資料源下載帶來了許多問題 — — 相同-起源瀏覽器策略，預取和緩存 — — 僅舉幾例。Twitter typeahead.js 帶有名為尋血獵犬的建議引擎。這透明地為您完成這項工作的大部分。如果你得到 NuGet 包 JavaScript 檔，你可以開始調入尋血獵犬而不用擔心它的下載和安裝程式。前面的程式碼片段中的提示變數結果從獵犬以下和相當標準的初始化：

var hints = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: "/hint/s?query=%QUERY"
});
hints.initialize();

注意遠端屬性。這是只是伺服器端點負責返回在下拉清單中顯示的提示。此外注意到語法 %查詢。這表明被發送到伺服器的提示輸入欄位中的字串。換句話說，%查詢是一個預留位置位於輸入欄位中的任何文本。預設情況下，typeahead.js 開始變得提示，只要您鍵入單個字元。如果你想要等待自動完成開始運行之前保持在緩衝區中的字元，然後添加一個設置物件作為該外掛程式的第一個參數：

$('#queryString').typeahead(
  {
    minLength: 2
  },
  {
    displayKey: 'value',
    source: hints.ttAdapter()
  }
});

當緩衝區已滿，足夠啟動遠端調用時，獵犬號開始上班。它將 JSON 資料下載和適應它顯示。在這一點上，你有勉強工作自動完成引擎就會彈出您已在伺服器上基於一些邏輯的建議。然而，還有很多事情要做之前，您可以使用自動完成功能有效地真正的網頁中。

使用 Typeahead.js 與引導

任何足夠複雜外掛程式需要一點 CSS 來看起來很漂亮。Typeahead.js 也不例外。該外掛程式附帶它自己的預設 UI，但你可能想要應用一些修補程式，尤其是如果你使用 Twitter 的引導。您可能還想要自訂一些視覺的屬性，如顏色和填充。圖 2 列出了一些您可能想要使用個人化設置的 typeahead.js 元件外觀和感覺的 CSS 類。

圖 2 編輯 CSS 類，以便自訂 Typeahead.js 元件

CSS 類	描述
twitter typeahead	在使用者鍵入提示輸入的欄位的樣式。
tt 提示	表示您所鍵入的內容與第一次暗示三角洲的文本的樣式。當提示屬性設置為 true （預設情況下假），僅使用此類。
tt 下拉式功能表	樣式下拉彈出提示上市的情況。
tt 游標	樣式下拉式清單方塊中突出顯示的建議。
tt 突出顯示	樣式文本相匹配的查詢字串的部分。

圖 3 給出了一個想法的你可以從自訂 CSS 類。您還可以自訂的整體外掛程式的行為，從功能的角度來看。

圖 3 的自訂的 CSS 類可以實現不同的效果為您的應用程式

添加用戶端的邏輯

自動完成的欄位是比任何長的下拉清單更快。時從中進行選擇的項的數目是數以百計，不過，任何經典的下拉清單中是緩慢的。因此，如果您計畫使用自動完成輸入的欄位來選擇一個特定的值 — — 說，一種產品或客戶的名稱 — — 然後平原的 typeahead.js 外掛程式是不夠的。就不需要一些附加的腳本代碼，將綁定到所選事件的外掛程式：

$('#queryString').on('typeahead:selected', 
  function (e, datum) {
  $("#queryCode").val(datum.id);
});

自動完成輸入的主要好處是使用者鍵入一些容易理解的名稱，系統將檢索關聯的唯一代碼或 id。此功能已進行顯式編碼。在選定的事件處理常式中，你從資料物件中檢索 ID 資訊，並將它安全地存儲在一個隱藏欄位。當表單的自動完成功能輸入的欄位屬於過帳時，所選的 ID 被張貼上網。資料物件的格式 — — 正在從下拉清單中選擇的資料項目目 — — 取決於您收到來自伺服器端的資料的格式。

在輸入欄位中顯示的文本呢？在這種情況下，您可能不需要有任何顯著的文本顯示在輸入欄位中。進一步的操作的相關輸入是你在隱藏欄位中的存儲。你有顯示是取決於你。只是注意到你指定的外掛程式設置 displayKey 屬性，因為如果該屬性的值將自動顯示在輸入欄位中。無論如何，您可以以程式設計方式設置的任何值：

$("#queryString").val(datum.label);

在某些情況下，自動完成文字方塊是 HTML 表單中的唯一元素。這意味著您可能想要處理任何選定的資料，只要它選定。通過將以下行添加到 typeahead.js 選定的事件處理常式，您類比按一下上的提交按鈕的表單：

$("#queryButton").click();

假設一個使用者開始在輸入欄位中鍵入，導致下拉清單中顯示，然後停止打字不做任何選擇。當他恢復打字時，你應該做什麼？當然，你會讓他再次鍵入直到他做出選擇。一旦使用者做出選擇，所以編輯簡歷時必須取消，選擇已存儲一些代碼。您需要一個本地變數來實現這一目標：

var typeaheadItemSelected = false;
$('#queryString').on('typeahead:selected', function (e, datum) {
  $("#queryCode").val(datum.id);
  typeaheadItemSelected = true;
});

您還需要處理常式的焦點事件的要重置任何存儲的資料的輸入欄位：

$('#queryString').on('input', function () {
  if (typeaheadItemSelected) {
    typeaheadItemSelected = false;
    $('#queryString').val(''); 
    $("#queryCode").val('');
  }
});

這種額外的用戶端邏輯的最終目的是確保自動完成輸入欄位工程下拉清單相同。

伺服器端的自動完成

無論在用戶端上的任何代碼可以做嚴格取決於從伺服器返回的資料。在最起碼，伺服器終結點是只是一個返回的 JSON 資料的 URL。一旦你有一個端點服務產品物件的集合，例如，可以使用 typeahead.js 的 displayKey 屬性上的下拉清單中的提示執行某種形式的資料繫結。在其最簡單的形式，JSON 返回控制器的方法可以如下所示：

public JsonResult P(string query)
{
  var productHints = _service.GetMatchingProducts(query);
  return Json(productHints, JsonRequestBehavior.AllowGet);
}

如果自動完成輸入的欄位預計將顯示同質資料專案的提示，這是一種理想的方法。在用戶端，事實上，您可以輕鬆地利用內置 typeahead.js 的範本機制和排列自訂的建議的意見：

$('#queryString').typeahead(
null,
{
  templates: {
    suggestion: Handlebars.compile('<b>({{Id}}</b>: {{notes}}')
  },
  source: hints.ttAdapter()
});

範本屬性替換 displayKey，並且設置為下拉清單內容的自訂版式。在下拉清單中圖 3 從前面的程式碼片段的結果。當安排一個範本，您可能想要使用如把手特設範本引擎 (handlebarsjs.com)。你必須把手從連結到該專案分別 typeahead.js。使用把手是可選的。你可以總是格式化 HTML 範本通過手動的 JavaScript 代碼或甚至返回一個具有預先設好格式的 HTML 的伺服器端物件。

當您自動完成輸入預計會返回異構的提示，例如產品或提供，事情就更棘手。在這種情況下，您必須返回一個包含足夠的資訊供使用者選擇一些中間資料類型的陣列。自動完成你跟這篇文章提供了一個基本的 AutoCompleteItem 類，如下所示：

public class AutoCompleteItem
{
  public String label { get; set; }
  public String id { get; set; }
  public String value { get; set; }
}

Id 屬性包含一個唯一的 id。在過帳時，這是接收控制器具有重要的意義。它通常由兩片 — — 實際的 ID 和唯一匹配的 ID 到一個資料集（產品或提供）的識別碼可能正在查詢中返回。屬性值是要顯示在下拉清單中的字串內容。其他屬性是種你可能需要的任何其他貨物屬性。Value 屬性還可以包含伺服器側排列為自訂的建議佈局的 HTML 字串。伺服器端代碼也是負責運行所需的全部查詢和資料將染色劑塗抹到 AutoCompleteItem 物件的集合。

接近尾聲了

每天都在現代 Web 網站可用性重要得多。它是受歡迎的網站的公眾形象，但中網站後端的實際資訊插入的位置更為重要。管理員一邊的我的網站之一，我曾經與超過 700 項的下拉清單。它的工作，但它緩慢。與自動完成，並且現在它是快得多，替換了它。我為此和其他實用程式在安排 GitHub 專案 bit.ly/1zubJea。

Dino Esposito 合著的"Microsoft.NET：構建企業應用程式"（微軟出版社，2014年）和"程式設計ASP.NETMVC 5"（微軟出版社，2014年）。Microsoft.NET 框架和 Android 平臺，它也會經常在世界各地的業內活動中發表演講的技術傳教士，埃斯波西托分享他視覺軟體 software2cents.wordpress.com 和在 Twitter 上 twitter.com/despos。

由於下面的技術專家，檢討這篇文章：喬恩 Arne Saeteras