Bootstrap3 输入提示插件typeahead

输入提示

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

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

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

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

表 4‑13 输入提示插件的选项
名称类型默认值说明
parentarray, function[ ]要查询的数据源。可以是字符串数组,也可以是一个函数。如果是函数,则接受两个参数,一个是输入字段中要查询的值 query,另一个是回调函数 process。函数可以直接返回数据源,实现同步查询,也可以通过 process 回调函数进行异步查询
itemsnumber8下拉选项中最多显示的条目数
minLengthnumber1触发提示所需的最小字符个数
matcherfunction大小写不敏感该函数用于决定某个查询是否匹配某个条目。它接受唯一参数item,表示当前需要测试的条目。 使用this.query引用当前查询字符串。如果匹配查询,就返回一个布尔值true
sorterfunction完全匹配,

 

大小写敏感,

大小写不敏感

该函数用来排序提示项。它接受唯一参数items,并且其变量范围在typeahead实例内。使用this.query引用当前查询字符串
updaterfunction返回选中项此方法用于返回选中的条目。它接受一个参数item,变量作用域为当前typeahead实例
highlighterfunction突出所有匹配项突出显示自动完成结果。它接受一个参数item,变量作用域为当前typeahead实例

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

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

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

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

输入提示

图4-21 输入提示

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

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

关于作者

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

  • 2
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页

打赏

ixygj197875

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者