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中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
深入了解Vue动态组件和异步组件
Jan 26 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
Yii2 中实现单点登录的方法
2018/03/09 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python内置函数OCT详解
2016/11/09 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
python中的colorlog库使用详解
2019/07/05 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
中职生自我鉴定范文
2013/10/03 职场文书
办公室主任职责范文
2013/11/08 职场文书
交通法规咨询中心工作职责
2013/11/27 职场文书
中华魂演讲稿
2014/05/13 职场文书
就职演讲稿范文
2014/05/19 职场文书
连锁超市项目计划书
2014/09/15 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
教师思想工作总结2015
2015/05/13 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python