jQuery.autocomplete 支持中文輸入(firefox)修正方法
更新時(shí)間:2011年03月10日 12:59:32 作者:
jQuery.autocomplete 是jquery的流行插件,,能夠很好的實(shí)現(xiàn)輸入框的自動(dòng)完成(autocomplete)、建議提示(input suggest)功能,支持ajax數(shù)據(jù)加載。
但唯一遺憾的是,在對(duì)中文輸入法打開時(shí),firefox3.0中是對(duì)中文拼音的自動(dòng)匹配,而對(duì)輸入后的中文無法及時(shí)觸發(fā)匹配;而在我的IE6.0下,則無此問題。
原因分析:
Autocomplete插件對(duì)用戶輸入字符的觸發(fā)自動(dòng)匹配是通過”keydown”事件進(jìn)行的(可分析jquery.autocomplete.js第 92行),在IE6中,當(dāng)輸入法打開時(shí),輸入的字符是不會(huì)觸發(fā)”keydown”的,只有中文輸入完畢才觸發(fā)之,所以中文輸入和latin文沒有區(qū)別的;但在firefox3.0下,無論輸入法打開否,按鍵都會(huì)觸發(fā)”keydown”事件,所以造成中文輸入完畢,自動(dòng)匹配的是剛才打出的部分中文拼音字母。------所以只有Firefox有問題。
解決方法:
網(wǎng)上查到的最多做法是修改jquery.autocomplete.js第92行,將”keydown”替換為”keyup”,但這個(gè)不是根本辦法,雖然這樣改后可在firefox中及時(shí)對(duì)輸入的中文進(jìn)行自動(dòng)匹配,但將原插件中回車、tab等重要的事件機(jī)制破壞了,比如這樣改后,如果你的input是在一個(gè)form里的話,回車從原來的將選定項(xiàng)輸入到input中變?yōu)榱酥苯犹峤籪orm表單了,這并不是我們想要的。
我的方法原理是,補(bǔ)充一個(gè)原插件觸發(fā)查詢的事件,就是當(dāng)input輸入欄發(fā)生字符變化時(shí),重新進(jìn)行查詢(調(diào)用其內(nèi)部的onChange函數(shù)),這里主要針對(duì)firefox而言,因?yàn)槲覀兊南到y(tǒng)訪問最多的是IE和firefox。而恰好firefox有一個(gè)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) {
原因分析:
Autocomplete插件對(duì)用戶輸入字符的觸發(fā)自動(dòng)匹配是通過”keydown”事件進(jìn)行的(可分析jquery.autocomplete.js第 92行),在IE6中,當(dāng)輸入法打開時(shí),輸入的字符是不會(huì)觸發(fā)”keydown”的,只有中文輸入完畢才觸發(fā)之,所以中文輸入和latin文沒有區(qū)別的;但在firefox3.0下,無論輸入法打開否,按鍵都會(huì)觸發(fā)”keydown”事件,所以造成中文輸入完畢,自動(dòng)匹配的是剛才打出的部分中文拼音字母。------所以只有Firefox有問題。
解決方法:
網(wǎng)上查到的最多做法是修改jquery.autocomplete.js第92行,將”keydown”替換為”keyup”,但這個(gè)不是根本辦法,雖然這樣改后可在firefox中及時(shí)對(duì)輸入的中文進(jìn)行自動(dòng)匹配,但將原插件中回車、tab等重要的事件機(jī)制破壞了,比如這樣改后,如果你的input是在一個(gè)form里的話,回車從原來的將選定項(xiàng)輸入到input中變?yōu)榱酥苯犹峤籪orm表單了,這并不是我們想要的。
我的方法原理是,補(bǔ)充一個(gè)原插件觸發(fā)查詢的事件,就是當(dāng)input輸入欄發(fā)生字符變化時(shí),重新進(jìn)行查詢(調(diào)用其內(nèi)部的onChange函數(shù)),這里主要針對(duì)firefox而言,因?yàn)槲覀兊南到y(tǒng)訪問最多的是IE和firefox。而恰好firefox有一個(gè)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) {
您可能感興趣的文章:
- Jquery Autocomplete 結(jié)合asp.net使用要點(diǎn)
- jquery autocomplete自動(dòng)完成插件的的使用方法
- jQuery Autocomplete自動(dòng)完成插件
- jQuery.Autocomplete實(shí)現(xiàn)自動(dòng)完成功能(詳解)
- jquery.AutoComplete.js中文修正版(支持firefox)
- jQuery 插件autocomplete自動(dòng)完成應(yīng)用(自動(dòng)補(bǔ)全)(asp.net后臺(tái))
- jQuery UI AutoComplete 使用說明
- jQuery UI Autocomplete 體驗(yàn)分享
相關(guān)文章
基于jquery實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了基于jquery二級(jí)聯(lián)動(dòng)效果的代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
jQuery實(shí)現(xiàn)table表格checkbox全選的方法分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)table表格checkbox全選的方法,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)與元素遍歷實(shí)現(xiàn)table表格checkbox元素狀態(tài)動(dòng)態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
基于jquery的textarea發(fā)布框限制文字字?jǐn)?shù)輸入(添加中文識(shí)別)
基于jquery的textarea發(fā)布框限制文字字?jǐn)?shù)輸入(添加中文識(shí)別),需要的朋友可以參考下2012-02-02
jQuery動(dòng)態(tài)添加元素后元素注冊(cè)事件失效解決
這篇文章主要介紹了jQuery動(dòng)態(tài)添加元素后元素注冊(cè)事件失效解決,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08
jquery 驗(yàn)證用戶名是否重復(fù)代碼實(shí)例
這篇文章主要介紹了jquery驗(yàn)證用戶名是否重復(fù),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JQERY limittext 插件0.2版(長內(nèi)容限制顯示)
JQERY limittext 插件為長內(nèi)容增加一個(gè)顯示更多的功能2010-08-08
jQuery扁平化風(fēng)格下拉框美化插件FancySelect使用指南
這篇文章主要介紹了jQuery扁平化風(fēng)格下拉框美化插件FancySelect使用指南,需要的朋友可以參考下2015-02-02

