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 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
Javascript计算时间差的函数分享
Jul 04 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
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
基于mysql的论坛(3)
2006/10/09 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
php正则修正符用法实例详解
2016/12/29 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
清空上传控件input file的值
2010/07/03 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
Python 操作MySQL详解及实例
2017/04/30 Python
基于Django用户认证系统详解
2018/02/21 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
Python退火算法在高次方程的应用
2018/07/26 Python
set在python里的含义和用法
2019/06/24 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
python 实现两个npy档案合并
2020/07/01 Python
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
《月迹》教学反思
2014/02/19 职场文书
聚美优品励志广告词
2014/03/14 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
幼儿园安全教育月活动总结
2015/05/08 职场文书
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python