Bootstrap Typeahead
簡介
在本教學中，您將看到如何使用 Bootstrap 創建 Typeahead。
Typeahead 在用戶填寫表單時，為用戶提供提示或數據。
Bootstrap 允許您創建外觀好看的 Typeahead，而且，它易於擴展，您可以不需要太大的改動就可以加強它的功能。
什麼是必需的
Typeahead 是 Bootstrap 2.x版本的產品，所以本教學採用的是Bootstrap2.0進行測試。
您必須引用兩個 JavaScript 檔 jquery.js 和 bootstrap-typeahead.js，它們都位於 docs/assets/js/ 內。
下麵的實例演示了如何不編寫 JavaScript 只通過標記創建 Typeahead。
實例
實例
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="["Ahmedabad","Akola","Asansol","Aurangabad","Bangaluru","Baroda","Belgaon","Berhumpur","Calicut","Chennai","Chapra","Cherapunji"]">
</div>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
您可以通過 javascript 調用 typeahead，並通過使用不同的選項加強功能。通過 JavaScript 調用 typeahead 的用法如下：
$('#example').typeahead()
其中 'example' 是您要應用 typeahead 的 input 字段的 id。
實例
實例
<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" />
</div>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
<script>
var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'];
$('#search').typeahead({source: subjects})
</script>
選項
您可以使用各種 Typeahead 選項。下麵對各個選項進行詳細講解：
source: 規定包含查詢時要顯示的值的數據源。值的類型是 array，默認值是 [ ]。
items: 規定查詢時要顯示的條目的最大值。數據類型是 number，默認值是 8。
matcher: 決定查詢是否匹配條目。帶有一個單一的參數，即要測試查詢的條目。當前查詢通過 this.query 訪問。返回一個布爾值 true，表示查詢匹配。數據類型是 function。默認情況下是大小寫不敏感的。
sorter: 用於自動分類結果。帶有一個單一的參數，即具有 typeahead 實例範圍的條目。當前查詢通過 this.query 訪問。數據類型是 function。默認值是精確匹配的，其他的值還可以是大小寫敏感、大小寫不敏感。
highlighter: 用於自動高亮突出顯示結果。帶有一個單一的參數，即具有 typeahead 實例範圍的條目。數據類型是 function。默認情況下是高亮突出顯示所有默認的匹配項。
方法
.typeahead(options)
它初始化了一個帶 Typeahead 的輸入框。