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阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
Jun 08 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
ES6关于Promise的用法详解
May 07 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 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的一个登录的类 [推荐]
2007/03/16 PHP
php字符串截取的简单方法
2013/07/04 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
PHP异常处理浅析
2015/05/12 PHP
codeigniter实现get分页的方法
2015/07/10 PHP
PHP自定义错误用法示例
2016/09/28 PHP
微信自定义分享php代码分析
2016/11/24 PHP
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
JS实现一个列表中包含上移下移删除等功能
2014/09/24 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
js数组去重的hash方法
2016/12/22 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
写了个监控nginx进程的Python脚本
2012/05/10 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
C#面试问题
2016/07/29 面试题
产品发布会策划方案
2014/05/12 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
征求意见函
2015/06/05 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL