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 相关文章推荐
JavaScript中几种常见排序算法小结
Feb 22 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 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高级对象构建 多个构造函数的使用
2012/02/05 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
新手入门常用代码集锦
2007/01/11 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
python求crc32值的方法
2014/10/05 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
Python 将pdf转成图片的方法
2018/04/23 Python
Python元组常见操作示例
2019/02/19 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
Python 函数list&read&seek详解
2019/08/28 Python
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
Java程序开发中如何应用线程
2016/03/03 面试题
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
年会主持词结束语
2014/03/27 职场文书
合作投资意向书
2014/04/01 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
教师节演讲稿
2014/05/06 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
企业委托书范本
2014/09/13 职场文书
先进班组材料范文
2014/12/25 职场文书
旷工检讨书1000字
2015/01/01 职场文书
论文答辩开场白大全
2015/05/27 职场文书
忠诚与背叛观后感
2015/06/04 职场文书