Bootstrap 教程
在本教程中,您將看到如何使用 Bootstrap 創(chuàng)建 Typeahead。
Typeahead 在用戶(hù)填寫(xiě)表單時(shí),為用戶(hù)提供提示或數(shù)據(jù)。
Bootstrap 允許您創(chuàng)建外觀好看的 Typeahead,而且,它易于擴(kuò)展,您可以不需要太大的改動(dòng)就可以加強(qiáng)它的功能。
Typeahead 是 Bootstrap 2.x版本的產(chǎn)品,所以本教程采用的是Bootstrap2.0進(jìn)行測(cè)試。
您必須引用兩個(gè) JavaScript 文件 jquery.js 和 bootstrap-typeahead.js,它們都位于 docs/assets/js/ 內(nèi)。
下面的實(shí)例演示了如何不編寫(xiě) JavaScript 只通過(guò)標(biāo)記創(chuàng)建 Typeahead。
您可以通過(guò) javascript 調(diào)用 typeahead,并通過(guò)使用不同的選項(xiàng)加強(qiáng)功能。通過(guò) JavaScript 調(diào)用 typeahead 的用法如下:
$('#example').typeahead()其中 'example' 是您要應(yīng)用 typeahead 的 input 字段的 id。
您可以使用各種 Typeahead 選項(xiàng)。下面對(duì)各個(gè)選項(xiàng)進(jìn)行詳細(xì)講解:
source: 規(guī)定包含查詢(xún)時(shí)要顯示的值的數(shù)據(jù)源。值的類(lèi)型是 array,默認(rèn)值是 [ ]。
items: 規(guī)定查詢(xún)時(shí)要顯示的條目的最大值。數(shù)據(jù)類(lèi)型是 number,默認(rèn)值是 8。
matcher: 決定查詢(xún)是否匹配條目。帶有一個(gè)單一的參數(shù),即要測(cè)試查詢(xún)的條目。當(dāng)前查詢(xún)通過(guò) this.query 訪問(wèn)。返回一個(gè)布爾值 true,表示查詢(xún)匹配。數(shù)據(jù)類(lèi)型是 function。默認(rèn)情況下是大小寫(xiě)不敏感的。
sorter: 用于自動(dòng)分類(lèi)結(jié)果。帶有一個(gè)單一的參數(shù),即具有 typeahead 實(shí)例范圍的條目。當(dāng)前查詢(xún)通過(guò) this.query 訪問(wèn)。數(shù)據(jù)類(lèi)型是 function。默認(rèn)值是精確匹配的,其他的值還可以是大小寫(xiě)敏感、大小寫(xiě)不敏感。
highlighter: 用于自動(dòng)高亮突出顯示結(jié)果。帶有一個(gè)單一的參數(shù),即具有 typeahead 實(shí)例范圍的條目。數(shù)據(jù)類(lèi)型是 function。默認(rèn)情況下是高亮突出顯示所有默認(rèn)的匹配項(xiàng)。
.typeahead(options)
它初始化了一個(gè)帶 Typeahead 的輸入框。
其他擴(kuò)展