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 hashtable实现代码
Oct 13 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
layui动态加载多表头的实例
Sep 05 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 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
Yii配置文件用法详解
2014/12/04 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
Javascript Select操作大集合
2009/05/26 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
Python如何输出警告信息
2020/07/30 Python
python 发送get请求接口详解
2020/11/17 Python
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
计算机开发个人求职信范文
2013/09/26 职场文书
简历的自我评价
2014/02/03 职场文书
销售经理岗位职责
2014/03/16 职场文书
环保志愿者活动总结
2014/06/27 职场文书
党员自我评价2015
2015/03/03 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
送给客户微信问候语!
2019/07/04 职场文书
比较node.js和Deno
2021/04/27 Javascript