在输入框输入信息后,自动提示补全。我选择用typeahead.js,后来发现,原来这个库的相关学习资料很少,搞的稍微有点久,才弄明白点...本文实属原创,如有错误,敬请指教!
简介:
官网:http://twitter.github.io/typeahead.js
github: https://github.com/twitter/typeahead.js
使用文档:https://www.awesomes.cn/repo/twitter/typeahead-js
在查资料的过程中,不难发现,typeahead.js一直会跟boostrap扯上关系。实际上在bootstrap 2.x时,自带了补全控件typeahead;但是到了,bootstrap 3.x时,舍弃了这个插件,这是出现了单独插件,名叫bootstrap-3-typeahead,再后面bootstrap-3-typeahead 改名 typeahead.js.
接口:
name —— 数据集的名字。
source —— 规定包含查询时要显示的值的数据源。值的类型是 array,默认值是 [ ]。
items —— 规定查询时要显示的条目的最大值。数据类型是 number,默认值是 8。
highlighter —— 用于自动高亮突出显示结果。带有一个单一的参数,即具有 typeahead 实例范围的条目。数据类型是 function。默认情况下是高亮突出显示所有默认的匹配项。
minLength —— 推荐引擎开始渲染所需要的最小字符。默认为 1 。
hint —— 默认为 true,会自动补全第一个匹配的元素,设置为 false 时,typeahead 将不会补全 .
display - 对于推荐对象,决定用何种字符串表示,并将会在某个输入控件选择后使用。其值可以是关键字符串,或者是将推荐对象转换为string的函数。默认为 value.
$(‘.typeahead‘).typeahead(‘destroy‘);移除typeahead功能,并将 input 元素的状态重置为原始状态。
$(‘.typeahead‘).typeahead(‘open‘);打开typeahead下拉菜单。
$(‘.typeahead‘).typeahead(‘close‘);关闭typeahead的下拉菜单。
var myVal = $(‘.typeahead‘).typeahead(‘val‘); 返回typeahead的当前值,该值为用户输入到 input 元素中的文本
$(‘.typeahead‘).typeahead(‘val‘, myVal);设置typeahead的值,要来替代 jQuery#val 函数。