smartComplete——轻量级的autoComplete插件，开源
项目后端觉得autoComplete响应略慢，于是花了两天时间写了这插件，基于jQuery 1.7+，仓库地址 https://github.com/VaJoy/smartComplete ，欢迎各种star。
要注意的是，smartComplete只处理从后端接收到响应数据的情况就生成数据选择列表的情况，数据匹配工作交给后端去做了，没有前端匹配功能。
smartComplete具有 数据缓存 和 检测拼音模式 的功能。前者会将曾经接收到的响应数据缓存起来，后续请求数据会先到缓存中哈希一下，若没取到才发送请求；而后者指的是在chrome下打拼音时，可以忽略打拼音的过程、不把文本框内显示的元音字符作为新增数据发送请求。
因此smartComplete一来可以加快数据获取速度，二来可以有效减少客户端向后端发送的冗余请求数量：
另外smartComplete也具有良好的防抖功能，默认为300ms的延时，可以通过参数修改该值。同时也能保障异步请求下，服务端返回数据顺序的正确性，smartComplete在收到响应数据时会先判断其是否为最新请求对应的响应数据，如果不是，就只将数据存入缓存中但不显示到列表上。
使用方法
引入jQuery和smartcomplete脚本文件后，使用 $("input").smartComplete([OPTION]) 的形式进行绑定即可，可参考github上的示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>demo</title>
<style>
div{
position: absolute;
margin: 110px;
background: yellow;
}
div>input{
outline: none;
margin: 50px;
padding: 5px 10px;
}
.abc>li:nth-child(odd){
background: #FFFFBF !important;
}
.abc>li:hover{
background: #BFFFBF !important;
color:#FF8000 !important;
font-weight: bold;
}
</style>
<script src="jq.js" type="text/javascript"></script>
<script src="smartcomplete.js" type="text/javascript"></script>
</head>
<body>
<input id="a" type="search" autocomplete="off"/> <div>
<input type="search" autocomplete="off"/>
<input type="search" autocomplete="off"/>
</div> <script>
$("#a").smartComplete({
url:"result.json", //服务端地址，此处我们使用JSON来模拟数据
ulClass:"abc"
}); $("div>input").smartComplete({
url:"result.json",
matchPY:!1, //忽略拼音打字过程
actFontColor:"red",
callback:function(data){ //回调，参数为选中数据项的对应数据
console.log(data.id,data.text)
}
});
</script>
</body>
</html>
响应数据模拟（result.json）：
[{"text":"福田体育", "id":"2052"},
{"text":"福田体育公园16L测试组（A3A2A733D1）", "id":"2051"},
{"text":"福田体育公园16L测试组（2EA41D3BB6）", "id":"1873"},
{"text":"福田体育公园16L测试组（A4E9BB30B6）", "id":"1874"},
{"text":"福田体育公园16L测试组（0DC7A7F19A ）", "id":"1875"},
{"text":"福田体育公园16L测试组（4DDD4B52A4）", "id":"1876"}]
效果如下：
OPTION选项：
url
服务器url路径，用于Ajax请求数据
ulClass
数据列表（ul）的自定义样式，示例：
<style>
.abc>li:nth-child(odd){
background: #FFFFBF !important;
}
.abc>li:hover{
background: #BFFFBF !important;
color:#FF8000 !important;
font-weight: bold;
}
</style>
<script>
$("#a").smartComplete({
url:"result.json", //url of SEVER
ulClass:"abc"
});
</script>
borderColor
数据列表（ul）的边框颜色，默认为#bbb。
fontColor
数据列表的文本颜色，默认为黑色。
actBgColor
鼠标移动到数据列表项（li）上时，该激活项的背景颜色，默认为#ddd。
actFontColor
鼠标移动到数据列表项（li）上时，该激活项的文本颜色，默认为黑色。
fontSize
数据列表的文本字号大小，默认为12px。
lineHeight
数据列表的文本行高（line-height），默认为16px。
maxHeight
数据列表允许显示的最大高度（max-height），默认为150px。
method Ajax
请求数据时的方法，默认为"post"
matchPY
boolean值，决定是否要匹配拼音模式下的拼写过程（主要用于chrome），默认为true。若不希望匹配设为false即可。
reg
过滤文本框输入内容的正则，默认为/'|(^\s+)|(\s+$)/g，即trim一下，并且过滤掉拼音模式下的分节符“'”。
defer
延时请求的间隔时间，默认为300ms。
zIndex
数据列表的z-index，默认为9999999。
encode
boolean值，决定是否把请求参数编码（encodeURIComponent）后再发送到服务器，默认为false。
callback
回调函数，当用户选中数据列表中某个选项后触发。该函数有一个参数，为选中数据项的对应数据，示例：
$("input").smartComplete({
url:"result.json",
callback:function(data){
console.log(data.id,data.text)
}
});
smartComplete设计过程遇到的比较坑的地方，还是对拼音模式下打字过程的处理，主要是浏览器之间的行为不兼容：
在Firefox下拼音过程keydown值为0且只触发一次，且监听不到keyup（选中时可监听到）。
在Chrome下拼音过程keydown值为229（即使选中），能监听keyup，但回车时keyup不触发。
在IE下拼音过程keydown值为229（即使选中），能监听keyup（回车也能监听到）。
另外当拼音模式出现云检测的智能联想词汇时，会额外触发一次oninput事件。而且我们还要顾及用户使用拼音模式打英文的情况（比如拼音模式下输入apple并选中它）。
在折腾了半天后使用了如下方案：
在oninput/onpropertychange事件中，若keydown值非229，则直接进入请求预备。若keydown值为229，则延时判断是否有触发keyup，若没有触发keyup表示为chrome下按下回车取词，故进入请求预备；若触发了keyup则判断其keyCode是否有效键值（如按下了数字、shift键等，其中对逗号键还要额外处理），若为有效键值才进入请求预备。其它情况均视为拼音模式下的打字过程，做忽略处理。
希望该插件能对你有所帮助，共勉~
smartComplete——轻量级的autoComplete插件，开源的更多相关文章
- jquery autocomplete插件
jquery autocomplete插件 https://goodies.pixabay.com/jquery/auto-complete/demo.html autocomplete-table ...
- C#中使用JQueryUI中Autocomplete插件
服务器端后台代码: 1 private string GetModelNames() { 2 return @"[ 3 { 4 'value': 'jquery', 5 'label': ' ...
- Jquery autocomplete插件的使用
简单用法: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...
- Jquery autocomplete 插件示例
通过Jquery autocomplete 插件动态传递输入参数完成自动完成提示: <%@ page language="java" import="java.ut ...
- 轻量级验证码生成插件webutil-licenseImage
轻量级验证码生成插件webutil-licenseImage源码与实例应用 webutil-licenseImage 插件内置4种验证码样式,支持用户扩展.自定义样式实现简单验证码. 源码脱管地址 ...
- jquery 自动完成 Autocomplete插件汇总
1. jQuery Autocomplete Mod jQuery Autcomplete插件.能够限制下拉菜单显示的结果数. 主页:http://www.pengoworks.com/worksho ...
- NET Core写了一个轻量级的Interception框架[开源]
NET Core写了一个轻量级的Interception框架[开源] ASP.NET Core具有一个以ServiceCollection和ServiceProvider为核心的依赖注入框架,虽然这只 ...
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
XHTML 首先将jquery库和相关ui插件,以及css导入.一共引用三个 jquery ,jquery_ui.js,jquery-ui.css 三个文件,不同版本小哥可能稍有差异(最后注意ajax ...
- 原生js实现autocomplete插件
在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...
随机推荐
- PHP 版本判断 version_compare() 函数
在度娘中简单的找了下,判断当前PHP的版本是否高于某个版本,或者低于某个版本的方法 显示的结果基本上都是一样的,好吧,要不是我忘记了version_compare()这个函数我才不会去找度娘,果断找以 ...
- 爬虫requests模块 1
让我们从一些简单的示例开始吧. 发送请求¶ 使用 Requests 发送网络请求非常简单. 一开始要导入 Requests 模块: >>> import requests 然后,尝试 ...
- python3 与 pip3 安装与使用
1. yum -y install openssl* (pip依赖ssl环境) 2.编译安装python3 下载地址:https://www.python.org/ftp/python/ .tgz c ...
- Azure Site to Site VPN 配置手册
目录 1 Azure Site to Site VPN配置前的准备 1 1.1 设备兼容 1 1.2 网络要求和注意事项 1 2 配置Azure site t ...
- JAVA语言搭建白盒静态代码、黑盒网站插件式自动化安全审计平台
近期打算做一个插件化的白盒静态代码安全审计自动化平台和黑盒网站安全审计自动化平台.现在开源或半开源做黑盒网站安全扫描的平台,大多是基于python脚本,安全人员贡献python脚本插件增强平台功能.对 ...
- Beginning Scala study note(6) Scala Collections
Scala's object-oriented collections support mutable and immutable type hierarchies. Also support fun ...
- 在Javascript中onclick()方法应用
<html> < head> < script type="text/javascript"> function onclick1(){ ale ...
- gem安装cocoapods
1.升级Ruby环境 sudo gem update --system 如果Ruby没有安装,请参考 如何在Mac OS X上安装 Ruby运行环境 2.安装CocoaPods时我们要访问cocoap ...
- 《转》Unity3D研究院编辑器之5.3JSON的序列化
Unity5.3 的一项新功能就是Json的序列化,支持嵌套使用,可以把json字符串转成对象,把对象转成json字符串. using UnityEngine; using UnityEditor; ...
- dede织梦cms-dede:autochannel标签
按排序位置的获取单个栏目的链接信息 >>dede>> {dede:autochannel partsort='' typeid=''}{/dede:autochannel} & ...