Bootstrap Typeahead

2018-11-03 17:47 更新

Bootstrap Typeahead

简介

在本教程中,您将看到如何使用 Bootstrap 创建 Typeahead。

Typeahead 在用户填写表单时,为用户提供提示或数据。

Bootstrap 允许您创建外观好看的 Typeahead,而且,它易于扩展,您可以不需要太大的改动就可以加强它的功能。

什么是必需的

Typeahead 是 Bootstrap 2.x版本的产品,所以本教程采用的是Bootstrap2.0进行测试。

您必须引用两个 JavaScript 文件 jquery.js 和 bootstrap-typeahead.js,它们都位于 docs/assets/js/ 内。

下面的实例演示了如何不编写 JavaScript 只通过标记创建 Typeahead。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap typehead 实例</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>  

您可以通过 javascript 调用 typeahead,并通过使用不同的选项加强功能。通过 JavaScript 调用 typeahead 的用法如下:

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

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bootstrap typeahead 使用选项实例</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>

选项

您可以使用各种 Typeahead 选项。下面对各个选项进行详细讲解:

source: 规定包含查询时要显示的值的数据源。值的类型是 array,默认值是 [ ]。

items: 规定查询时要显示的条目的最大值。数据类型是 number,默认值是 8。

matcher: 决定查询是否匹配条目。带有一个单一的参数,即要测试查询的条目。当前查询通过 this.query 访问。返回一个布尔值 true,表示查询匹配。数据类型是 function。默认情况下是大小写不敏感的。

sorter: 用于自动分类结果。带有一个单一的参数,即具有 typeahead 实例范围的条目。当前查询通过 this.query 访问。数据类型是 function。默认值是精确匹配的,其他的值还可以是大小写敏感、大小写不敏感。

highlighter: 用于自动高亮突出显示结果。带有一个单一的参数,即具有 typeahead 实例范围的条目。数据类型是 function。默认情况下是高亮突出显示所有默认的匹配项。

方法

.typeahead(options)

它初始化了一个带 Typeahead 的输入框。

点击这里,下载本教程中使用到的所有 HTML、CSS、JS 和图片文件。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号