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插件
在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...
随机推荐
- 【JavaScript】ES6 新语法
function* 声明 function* 声明(function关键字后跟一个星号)定义一个generator(生成器)函数,返回一个Generator对象. 生成器是一种可以从中退出并在之后重新 ...
- js简单的设置快捷键，hotkeys捕获键盘键和组合键的输入
设置快捷键 这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb). hotkeys on Githubhotkeys预览 创建 您将需要在您的系 ...
- Optimal Flexible Architecture(最优灵活架构)
来自:Oracle® Database Installation Guide 12_c_ Release 1 (12.1) for Linux Oracle base目录命名规范: /pm/s/u 例 ...
- Makefile笔记之一 ------ 变量的引用及赋值
1.变量的引用方式: "$(变量名)"或者"￥{变量名}" 例如: ${Objs}就是取变量Objs的值 注意: 当变量名为单字符是可以采用:"$a& ...
- POJ No.2386【B007】
[B007]Lake Counting[难度B]—————————————————————————————————————————— [Description] Due to recent rains ...
- CGrowableArray解析 _ DXUT容器
CGrowableArray的声明 in DXUTmisc.h //--------------------------- ...
- 苹果safari浏览器window.open问题
现象:在做项目的过程中,使用window.open打开新窗口,在windows系统的ie,firefox,chrome浏览器上测试均没有问题,在苹果系统的safari浏览器上发现有些window.op ...
- Django框架学习
两个月前学习的Django框架,写了个简易婚恋调查网站,代码就懒得全贴了,有两张图记录下
- 我的前端故事----Ajax方式和jsonp的实现区别
很久没有更新博客了,毕业2个月了,这段时间一直在忙于工作,一直没有时间更新,最近做的活动突然发现之前的经验居然忘记了...索性想想还是重新开始用博客记录平日里的工作经验吧,吐槽就到这里了,这篇记录的是 ...
- gulp的基本使用
gulp 了解 首先我们了解一下什么是gulp, gulp是前端自动化构建工具,在开发过程中很多重复的任务,我们都可以正确的使用gulp来完成,gulp基于nodejs,使用gulp可以做很多事情 例 ...