输入框自动补全功能

Posted 2020-09-16 黑白kn

在输入框输入信息后，自动提示补全。我选择用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 函数。