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 表单提交后按钮变灰的实例代码
Aug 16 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
vue组件学习教程
Sep 09 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
js之ajax文件上传
May 13 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实现图象锐化代码
2007/06/14 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
jquery在启动页面时,自动加载数据的实例
2018/01/22 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
Python中捕获键盘的方式详解
2019/03/28 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
使用pandas读取文件的实现
2019/07/31 Python
用python实现名片管理系统
2020/06/18 Python
virtualenv介绍及简明教程
2020/06/23 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
大学毕业登记表自我鉴定
2013/10/09 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers