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中将函数赋值给变量的调用方法
Mar 23 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
基于JavaScript实现弹幕特效
Aug 27 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 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
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
请求时token过期自动刷新token操作
2020/09/11 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
使用python绘制常用的图表
2016/08/27 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
Python探索之自定义实现线程池
2017/10/27 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
python实现简易通讯录修改版
2018/03/13 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
英国团购网站:Groupon英国
2017/11/28 全球购物
自我鉴定范文300字
2013/10/01 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
料理师求职信
2014/01/30 职场文书
护士长竞聘书
2014/03/31 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
生活部的活动方案
2014/08/19 职场文书
授权委托书
2014/09/17 职场文书
个人委托书范本汇总
2014/10/01 职场文书
科学育儿宣传标语
2014/10/08 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
护理培训心得体会
2016/01/22 职场文书
《失物招领》教学反思
2016/02/20 职场文书
总结Python变量的相关知识
2021/06/28 Python