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 相关文章推荐
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
javascript事件模型介绍
May 31 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
angularjs实现首页轮播图效果
Apr 14 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
vue ssr 指南详读
Jun 29 Javascript
JS实现简单的点赞与踩功能示例
Dec 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&&mysql)一
2006/10/09 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
使用React手写一个对话框或模态框的方法示例
2019/04/25 Javascript
Python实现的矩阵类实例
2017/08/22 Python
python3安装pip3(install pip3 for python 3.x)
2018/04/03 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
Python docx库用法示例分析
2019/02/16 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
python的flask框架难学吗
2020/07/31 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
Python字典实现伪切片功能
2020/10/28 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
销售个人求职信范文
2014/04/28 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
小学生差生评语
2014/12/29 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
追悼会悼词大全
2015/06/23 职场文书
党员反邪教心得体会
2016/01/15 职场文书
优秀大学生申请书
2019/06/24 职场文书