Bootstrap3实用教程
4.13 输入提示
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Bootstrap插件

概述

过渡

模态对话框

下拉菜单

滚动监听

标签页

工具提示

弹出提示

警告框

按钮

折叠

轮番

输入提示

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

在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 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验