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插件
在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...
随机推荐
- MySQL和Lucene索引对比分析
MySQL和Lucene都可以对数据构建索引并通过索引查询数据,一个是关系型数据库,一个是构建搜索引擎(Solr.ElasticSearch)的核心类库.两者的索引(index)有什么区别呢?以前写过 ...
- ABP中单元测试的技巧：Mock和数据驱动
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:虽然ABP为大家提供了测试的脚手架了,不过有些小技巧还是需要自己探索的. ASP.NE ...
- Ubuntu服务器被黑经历(ElastichSearch漏洞)
起因 最近我们的一台Ubuntu阿里云服务器一直提示有肉鸡行为,提示了好几天,开始并没有关注,然后连续几天后发现应该是个大问题啊.很可能服务被侵入了!!! 寻找线索 一开始我是完全懵逼的状态的,Lin ...
- LWIP总结
介绍 Lwip,light weight IP:是由Adam Dunkels 开发的一个小型开源的TCP/IP协议栈:目前已经为全球共同开发的开源协议:支持TCPIP协议族的核心协议:包括:ARP/I ...
- word使用笔记(1)
开始字母的格式也是宋体,只要全选后设置字体为Times New Roman即可,会自动跳过中文 新安的Mathtype字体有点奇怪,在样式里设置了一下,果然自定义为宋体了,改回Times New Ro ...
- viewgager
CycleRotationView:自定义控件,主要功能是实现类似与各种商城首页的广告轮播图.其实像这种比较常见的自定义控件早就满大街了,虽然说"不要重复发明轮子",但是不代表不用 ...
- 会议通js
js逻辑: /** * Created by wanglijuan on 2016/12/2. */ $(function () { //登陆后请求数据 // $.ajax({ // url:&quo ...
- z-stack协议uart分析(DMA)
1.从ZMain里面的main函数开始分析 2.进入int main( void ); HalDriverInit(); //硬件相关初始化,有DMA初始化和UART初始化 3.进入HalDriv ...
- MD5验证
commons-codec包可以从apache下载:http://commons.apache.org/codec/download_codec.cgi MD5现在是用来作为一种数字签名算法,即A向B ...
- Daily Scrum Meeting ——SeventhDay(Beta)12.15
一.Daily Scrum Meeting照片 二.Burndown Chart 想做的太多,冲刺仍在继续 三.项目进展(check-in) 1.完成了登录注册剩下的所有界面 2.更改通知详情和活动详 ...