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 相关文章推荐
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
jquery获取radio值实例
Oct 16 Javascript
Angular2数据绑定详解
Apr 18 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
vue element中axios下载文件(后端Python)
May 10 Javascript
js实现随机8位验证码
Jul 24 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+js实现异步图片上传实例分享
2014/06/02 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
详解Python的Django框架中的模版相关知识
2015/07/15 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
Python操作qml对象过程详解
2019/09/26 Python
python实现连连看游戏
2020/02/14 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
企业给企业的表扬信
2014/01/13 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
教师个人自我评价范文
2014/04/13 职场文书
合同协议书格式
2014/04/18 职场文书
毕业证代领委托书
2014/09/26 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis