jQuery.autocomplete 支持中文输入(firefox)修正方法


Posted in Javascript onMarch 10, 2011

但唯一遗憾的是,在对中文输入法打开时,firefox3.0中是对中文拼音的自动匹配,而对输入后的中文无法及时触发匹配;而在我的IE6.0下,则无此问题。

原因分析:
Autocomplete插件对用户输入字符的触发自动匹配是通过”keydown”事件进行的(可分析jquery.autocomplete.js第 92行),在IE6中,当输入法打开时,输入的字符是不会触发”keydown”的,只有中文输入完毕才触发之,所以中文输入和latin文没有区别的;但在firefox3.0下,无论输入法打开否,按键都会触发”keydown”事件,所以造成中文输入完毕,自动匹配的是刚才打出的部分中文拼音字母。------所以只有Firefox有问题。

解决方法:
网上查到的最多做法是修改jquery.autocomplete.js第92行,将”keydown”替换为”keyup”,但这个不是根本办法,虽然这样改后可在firefox中及时对输入的中文进行自动匹配,但将原插件中回车、tab等重要的事件机制破坏了,比如这样改后,如果你的input是在一个form里的话,回车从原来的将选定项输入到input中变为了直接提交form表单了,这并不是我们想要的。

我的方法原理是,补充一个原插件触发查询的事件,就是当input输入栏发生字符变化时,重新进行查询(调用其内部的onChange函数),这里主要针对firefox而言,因为我们的系统访问最多的是IE和firefox。而恰好firefox有一个input变化的事件就是oninput,那么我们只要在原jquery.autocomplete.js第199行,插入如下代码:
.bind("input", function() {
// @hack:support for inputing chinese characters in firefox
onChange(0, true);
});

插入后,代码大概如下:

...
...
jQueryinput.unbind();
jQuery(input.form).unbind(".autocomplete");
}).bind("input", function() {
// @hack:support for inputing chinese characters in firefox
onChange(0, true);
});
...

2、支持多次回车选定:
修改91行:
// only opera doesn't trigger keydown multiple times while pressed, others don't work with keypress at all
$input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) {
修改为:
// only opera mozilla doesn't trigger keydown multiple times while pressed, others don't work with keypress at all
$input.bind((($.browser.opera || $.browser.mozilla) ? "keypress" : "keydown") + ".autocomplete", function(event) {

Javascript 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
javascript操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
梳理一下vue中的生命周期
Dec 30 Vue.js
如何利用React实现图片识别App
Feb 18 Javascript
Jquery中getJSON在asp.net中的使用说明
Mar 10 #Javascript
JQuery中的$.getJSON 使用说明
Mar 10 #Javascript
基于jquery的地址栏射击游戏代码
Mar 10 #Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 #Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 #Javascript
jQuery总体架构的理解分析
Mar 07 #Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 #Javascript
You might like
php用正则表达式匹配中文实例详解
2013/11/06 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
python中base64加密解密方法实例分析
2015/05/16 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
Django实现分页显示效果
2019/10/31 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
英国现代绅士品牌:Hackett
2017/12/17 全球购物
JPA的特点
2014/10/25 面试题
设计总监岗位职责
2013/12/07 职场文书
公司清洁工岗位职责
2013/12/14 职场文书
农村改厕实施方案
2014/03/22 职场文书
食品流通安全承诺书
2014/05/22 职场文书
心理学专业求职信
2014/06/16 职场文书
裁员通知
2015/04/25 职场文书
学生犯错保证书
2015/05/09 职场文书
校运会新闻稿
2015/07/17 职场文书
上班旷工检讨书
2015/08/15 职场文书
学习心得体会
2019/06/20 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL