Bootstrap3 输入提示插件typeahead

最新推荐文章于 2021-09-28 09:38:01 发布

原创最新推荐文章于 2021-09-28 09:38:01 发布 · 2.9k 阅读

CC 4.0 BY-SA版权

文章标签：

173 篇文章

订阅专栏

本文详细介绍了输入提示插件的工作原理、配置选项及调用方式，包括如何在Bootstrap环境中使用该插件，以及如何通过data属性或JavaScript进行设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

输入提示是一个表单输入辅助类型的插件，它简单、易于扩展，可以在用户输入过程中，针对用户的输入快速地给出输入提示。

在Bootstrap2中，输入提示是一个标准插件，到了Bootstrap3，它已经被独立出来，不再是Bootstrap的标准插件。如果要使用输入提示插件的功能，可以从Bootstrap2中拷贝 bootstrap-typeahead.js 文件。

输入提示插件的基本原理是预先创建一个数据源，并通过 data-provide="typeahead" 属性激活输入提示功能。这样，在用户输入过程中，浏览器就会针对用户的输入实时查找数据源，并以下拉列表的形式给出提示。

输入提示插件提供了诸多配置选项，所有的选项都可以通过 data 属性或JavaScript进行设置。见表 4‑13。

表 4‑13 输入提示插件的选项
名称	类型	默认值	说明
parent	array, function	[ ]	要查询的数据源。可以是字符串数组，也可以是一个函数。如果是函数，则接受两个参数，一个是输入字段中要查询的值 query，另一个是回调函数 process。函数可以直接返回数据源，实现同步查询，也可以通过 process 回调函数进行异步查询
items	number	8	下拉选项中最多显示的条目数
minLength	number	1	触发提示所需的最小字符个数
matcher	function	大小写不敏感	该函数用于决定某个查询是否匹配某个条目。它接受唯一参数item，表示当前需要测试的条目。使用this.query引用当前查询字符串。如果匹配查询，就返回一个布尔值true
sorter	function	完全匹配, 大小写敏感, 大小写不敏感	该函数用来排序提示项。它接受唯一参数items，并且其变量范围在typeahead实例内。使用this.query引用当前查询字符串
updater	function	返回选中项	此方法用于返回选中的条目。它接受一个参数item，变量作用域为当前typeahead实例
highlighter	function	突出所有匹配项	突出显示自动完成结果。它接受一个参数item，变量作用域为当前typeahead实例

输入提示插件支持两种调用方式：一种是通过 data 属性调用，一种是通过JavaScript调用。无论使用哪种调用方式，都至少要通过 source 选项来配置数据源。

通过 data 属性调用时，通过 data-source 属性配置数据源。如：

<input type="text" data-provide="typeahead" data-source='["Alabama","Alaska","Arizona","California","Colorado","Connecticut"]'>

现在，用户输入过程中，浏览器会根据用户的输入给出提示。比如用户输入字母 'a'，会立即弹出所有包含字母 'a' 的词条列表，供用户选择。效果如图 4‑21所示：

输入提示

图4-21 输入提示

如果通过JavaScript调用，要先创建一个数组，再通过 source 选项配置数据源，让它指向该数组。如：

<script>
var aheadlist = ["Alabama","Alaska","Arizona","California","Colorado","Connecticut"];
$('#typeahead').typeahead({
source: aheadlist
});
</script>

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。