两款juqery autocomplete 使用总结

近日得到一个任务:调研“输入提示”js plugin,并集成到项目中去。我对jquery-ui-autocomplete 和 jquery-autocomplete 都做了简单的技术调研,发现了一些问题,有了一些心得。
jquery-autocomplete git-address:https://github.com/devbridge/jQuery-Autocomplete

[img]http://dl2.iteye.com/upload/attachment/0086/6192/86b6b6d3-8409-3e78-97dd-3b8ea60caa7c.png[/img]

该开发者出了两版,我下载的最新版,demo中是基于jquery-1.8.2.min.js的,支持最低的jquery 版本是1.27,并且仅依赖jquery核心js。这款jquery.autocomplete.js options有几个重要属性。
1)lookupFilter 可以添加一个对source 结果过滤规则。
2)zindex 设置自动提示div的显示层级
3)noCache 是否缓存查询结果
4)匹配内容在提示内容中高亮显示
5) 双端匹配(%xxx%)
该款autocomplete js 完美支持中文录入提示,但是 source对于非key value 数组支持不够好,例如source:['aaa','bbb','ccc'] 需要对该source重新处理成[key1:value1,key2:value2] 的数据格式。该js对同key做了覆盖处理,后面相同的key会覆盖掉前面的数据,提示匹配只会匹配后面key对应的value.



jquery-ui autocomplete url:http://jqueryui.com/autocomplete/ .

[img]http://dl2.iteye.com/upload/attachment/0086/6194/52f52143-7e8e-3e5d-9de4-c0c805095308.png[/img]

该款输入提示js需依赖jquery.ui.core.js ,jquery.ui.widget.js jquery.ui.position.js 。
1)该款自动提示plugin是基于widget ,提供基础的api ,不做赘述.
2)匹配模式为单端匹配(%xxx)。

该插件jquery-ui 1.8.16 版本的autocomplete 无法检测首次中文输入事件,无法提示自动补全内容。对于英文输入提示,没有发现任何问题。
对于1.8.16 输入中文不触发autocomplete 接解决办法,是追加一个input事件,当listen到输入时,触发autocomplete search数据。

"blur.autocomplete",
function(c) {
if (!a.options.disabled) {
clearTimeout(a.searching);
a.closing = setTimeout(function () {
a.close(c);
a._change(c)
}, 150)
}
}).bind('input',function (c) {
a.search(a.item);
});



总结:jquery-autocomplete依赖较少,如果单存想添加输入提示功能,它是个不错的选择,支持cache,支持中文提示,代码体积很小,在dialog 层级较多的前提下,提示div依然不会被覆盖,这个也得意于zindex 支持。
jquery-ui autocomplete 依赖较多,所以会引入一些不必要的代码,弹出层级较多时,zindex 无法灵活控制,默认每次输入会自动search后台数据,对server压力较多一些。,但是如果web前端是基于jquery-ui的实现,那么直接利用jquery-ui autocomplete 实现输入提示,个人认为是最合适的,因为引入其他的提示plugin,需要解决js冲突。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值