jQuery -- Autocomplete

Autocomplete 顾名思义就是自动完成，在 input 框中输入内容时，将会自动补全符合输入内容的信息。

官方链接及使用说明：

https://github.com/ArtemFitiskin/jquery-autocompleter

使用方法：

Scripts:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.autocompleter.min.js" type="text/javascript"></script>

Styles:

<link rel="stylesheet" href="css/jquery.autocompleter.css">

使用：例一

$(function () {
    $('input').autocompleter({ source: 'path/to/get_data_request' });
});

例二

var data = [
{ 'value': '1', 'label': 'one' },
{ 'value': '2', 'label': 'two' },
{ 'value': '3', 'label': 'three' }
];$(function () {    $('input').autocompleter({ source: data });
});

想体验用法的可以走下面链接：

http://www.jq22.com/yanshi438

原理：

看了以下图片就能明白是怎么实现的了。

以下内容基于图片进行讲解

重点翻译一下参数和方法：

名字 -- 类型 -- 解释 -- 默认值

1. source -- str,obj -- url或者本地对象 -- null
2. empty -- 布尔 -- 如果值为空时展开 -- true 注：在默认情况下，当input获得焦点时也获取内容。设置为false，则不会显示内容。
3. limit -- int -- 显示多少条结果 -- 10
4. customClass -- array -- 为div添加class数组 -- [] 注：顺序添加class。样式重复时，后面的class样式会覆盖前面的
5. cache -- bool -- 保存数据到本地存储来避免XHR请求重复 -- true
6. cacheExpires -- int -- 设置缓存生命周期 -- 86400
7. focusOpen -- bool -- 当光标获得焦点时展开 -- true 注：focusOpen是empty的一种特殊情况
8. hint -- bool -- 将满足条件的第一个选项单独拿出来 -- false 如图：

1. selectFirst -- bool -- 如果设置为true，第一个选项将自动匹配 -- false 如图：

比较和hint的区别，若为true，则忽略changeWhenSelect

1. changeWhenSelect -- bool -- 是否允许使用上下箭头切换选中值 -- true
2. highlightMatches -- bool -- 匹配的字符加粗 -- false 如图：

即添加 strong 标签

1. ignoredKeyCode -- array -- 忽略哪些键盘按键 -- []
2. customLabel -- str -- The name of object's property which will be used as a label -- false
3. customValue -- str -- The name of object's property which will be used as a value -- false
4. template -- str -- 自定义列模板 -- false 例如： <span>{{ label }} is {{ customPropertyFromSource }}</span>
5. offset -- str -- Source response offset -- false
6. combine -- function -- 返回一个可扩展的Ajax数据对象 $.noop
7. 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), 插件定义后，修改插件的参数。

例如：

$('#input').autocompleter('option', {
limit: 5,
template: '<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}'
});

3. open(), 打开选项

4. close(), 关闭选项

5. clearCache(), 清除缓存

6. destory() 删除插件