Autocomplete 顾名思义就是自动完成，在 input 框中输入内容时，将会自动补全符合输入内容的信息。
官方链接及使用说明：
https://github.com/ArtemFitiskin/jquery-autocompleter
使用方法：
Scripts:
代码语言：javascript复制<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.autocompleter.min.js" type="text/javascript"></script>Styles:
代码语言：javascript复制<link rel="stylesheet" href="css/jquery.autocompleter.css">使用：例一
代码语言：javascript复制$(function () {
$('input').autocompleter({ source: 'path/to/get_data_request' });
});例二
代码语言：javascript复制var data = [
{ 'value': '1', 'label': 'one' },
{ 'value': '2', 'label': 'two' },
{ 'value': '3', 'label': 'three' }
];$(function () { $('input').autocompleter({ source: data });
});想体验用法的可以走下面链接：
http://www.jq22.com/yanshi438
原理：
看了以下图片就能明白是怎么实现的了。
以下内容基于图片进行讲解
重点翻译一下参数和方法：
名字 -- 类型 -- 解释 -- 默认值
- source -- str,obj -- url或者本地对象 -- null
- empty -- 布尔 -- 如果值为空时展开 -- true 注：在默认情况下，当input获得焦点时也获取内容。设置为false，则不会显示内容。
- limit -- int -- 显示多少条结果 -- 10
- customClass -- array -- 为div添加class数组 -- [] 注：顺序添加class。样式重复时，后面的class样式会覆盖前面的
- cache -- bool -- 保存数据到本地存储来避免XHR请求重复 -- true
- cacheExpires -- int -- 设置缓存生命周期 -- 86400
- focusOpen -- bool -- 当光标获得焦点时展开 -- true 注：focusOpen是empty的一种特殊情况
- hint -- bool -- 将满足条件的第一个选项单独拿出来 -- false 如图：
- selectFirst -- bool -- 如果设置为true，第一个选项将自动匹配 -- false 如图：
比较和hint的区别，若为true，则忽略changeWhenSelect
- changeWhenSelect -- bool -- 是否允许使用上下箭头切换选中值 -- true
- highlightMatches -- bool -- 匹配的字符加粗 -- false 如图：
即添加 strong 标签
- ignoredKeyCode -- array -- 忽略哪些键盘按键 -- []
- customLabel -- str -- The name of object's property which will be used as a label -- false
- customValue -- str -- The name of object's property which will be used as a value -- false
- template -- str -- 自定义列模板 -- false 例如： <span>{{ label }} is {{ customPropertyFromSource }}</span>
- offset -- str -- Source response offset -- false
- combine -- function -- 返回一个可扩展的Ajax数据对象 $.noop
- callback -- function -- 回调函数，参数（value，index） -- $.noop
详细参数意义参考网页：
https://github.com/ArtemFitiskin/jquery-autocompleter
jQuery空函数
$.noop是 jQuery 中的一个空函数，源码如下：
方法：
调用源码时比较特殊。
插件中有个publics 的JSON对象中，存放着所有的方法。如图：
入口则是这样定义的：
所以方法的调用都是这样的：
$(...).autocomplete('open');
$(...).autocomplete('destory');
......
1. defaults(opt), 设置默认值
2. options(properties), 插件定义后，修改插件的参数。
例如：
代码语言：javascript复制$('#input').autocompleter('option', {
limit: 5,
template: '<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}'
});3. open(), 打开选项
4. close(), 关闭选项
5. clearCache(), 清除缓存
6. destory() 删除插件
