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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
使用TextRange获取输入框中光标的位
Oct 14 Javascript
javascript 自动转到命名锚记
Jan 10 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
详解vue express启动数据服务
Jul 05 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 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
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
一个oracle+PHP的查询的例子
2006/10/09 PHP
php 过滤器实现代码
2010/08/09 PHP
php的hash算法介绍
2014/02/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
激活 ActiveX 控件
2006/10/09 Javascript
js版本A*寻路算法
2006/12/22 Javascript
Div自动滚动到末尾的代码
2008/10/26 Javascript
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
django中间键重定向实例方法
2019/11/10 Python
python 深度学习中的4种激活函数
2020/09/18 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
奥巴马上海演讲稿
2014/09/10 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
法律服务所工作总结
2015/08/10 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
Python中re模块的元字符使用小结
2022/04/07 Python