99re热这里只有精品视频,7777色鬼xxxx欧美色妇,国产成人精品一区二三区在线观看,内射爽无广熟女亚洲,精品人妻av一区二区三区

Bootstrap Typeahead

2018-11-03 17:47 更新

Bootstrap Typeahead

簡(jiǎn)介

在本教程中，您將看到如何使用 Bootstrap 創(chuàng)建 Typeahead。

Typeahead 在用戶(hù)填寫(xiě)表單時(shí)，為用戶(hù)提供提示或數(shù)據(jù)。

Bootstrap 允許您創(chuàng)建外觀(guān)好看的 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。

實(shí)例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap typehead 實(shí)例</title>
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="well">
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Ahmedabad&quot;,&quot;Akola&quot;,&quot;Asansol&quot;,&quot;Aurangabad&quot;,&quot;Bangaluru&quot;,&quot;Baroda&quot;,&quot;Belgaon&quot;,&quot;Berhumpur&quot;,&quot;Calicut&quot;,&quot;Chennai&quot;,&quot;Chapra&quot;,&quot;Cherapunji&quot;]">
</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>
</body>
</html>

您可以通過(guò) javascript 調(diào)用 typeahead，并通過(guò)使用不同的選項(xiàng)加強(qiáng)功能。通過(guò) JavaScript 調(diào)用 typeahead 的用法如下： 

$('#example').typeahead()
其中 'example' 是您要應(yīng)用 typeahead 的 input 字段的 id。

實(shí)例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap typeahead 使用選項(xiàng)實(shí)例</title>
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="well">
	<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>
</body>
</html>

選項(xiàng)

您可以使用各種 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 訪(fǎng)問(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 訪(fǎng)問(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 的輸入框。

點(diǎn)擊這里，下載本教程中使用到的所有 HTML、CSS、JS 和圖片文件。

以上內(nèi)容是否對(duì)您有幫助：
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)