jQuery.autocomplete 支持中文輸入(firefox)修正方法
更新時間:2011年03月10日 12:59:32 作者:
jQuery.autocomplete 是jquery的流行插件,,能夠很好的實現(xiàn)輸入框的自動完成(autocomplete)、建議提示(input suggest)功能,支持ajax數(shù)據(jù)加載。
但唯一遺憾的是,在對中文輸入法打開時,firefox3.0中是對中文拼音的自動匹配,而對輸入后的中文無法及時觸發(fā)匹配;而在我的IE6.0下,則無此問題。
原因分析:
Autocomplete插件對用戶輸入字符的觸發(fā)自動匹配是通過”keydown”事件進行的(可分析jquery.autocomplete.js第 92行),在IE6中,當輸入法打開時,輸入的字符是不會觸發(fā)”keydown”的,只有中文輸入完畢才觸發(fā)之,所以中文輸入和latin文沒有區(qū)別的;但在firefox3.0下,無論輸入法打開否,按鍵都會觸發(fā)”keydown”事件,所以造成中文輸入完畢,自動匹配的是剛才打出的部分中文拼音字母。------所以只有Firefox有問題。
解決方法:
網(wǎng)上查到的最多做法是修改jquery.autocomplete.js第92行,將”keydown”替換為”keyup”,但這個不是根本辦法,雖然這樣改后可在firefox中及時對輸入的中文進行自動匹配,但將原插件中回車、tab等重要的事件機制破壞了,比如這樣改后,如果你的input是在一個form里的話,回車從原來的將選定項輸入到input中變?yōu)榱酥苯犹峤籪orm表單了,這并不是我們想要的。
我的方法原理是,補充一個原插件觸發(fā)查詢的事件,就是當input輸入欄發(fā)生字符變化時,重新進行查詢(調(diào)用其內(nèi)部的onChange函數(shù)),這里主要針對firefox而言,因為我們的系統(tǒng)訪問最多的是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) {
原因分析:
Autocomplete插件對用戶輸入字符的觸發(fā)自動匹配是通過”keydown”事件進行的(可分析jquery.autocomplete.js第 92行),在IE6中,當輸入法打開時,輸入的字符是不會觸發(fā)”keydown”的,只有中文輸入完畢才觸發(fā)之,所以中文輸入和latin文沒有區(qū)別的;但在firefox3.0下,無論輸入法打開否,按鍵都會觸發(fā)”keydown”事件,所以造成中文輸入完畢,自動匹配的是剛才打出的部分中文拼音字母。------所以只有Firefox有問題。
解決方法:
網(wǎng)上查到的最多做法是修改jquery.autocomplete.js第92行,將”keydown”替換為”keyup”,但這個不是根本辦法,雖然這樣改后可在firefox中及時對輸入的中文進行自動匹配,但將原插件中回車、tab等重要的事件機制破壞了,比如這樣改后,如果你的input是在一個form里的話,回車從原來的將選定項輸入到input中變?yōu)榱酥苯犹峤籪orm表單了,這并不是我們想要的。
我的方法原理是,補充一個原插件觸發(fā)查詢的事件,就是當input輸入欄發(fā)生字符變化時,重新進行查詢(調(diào)用其內(nèi)部的onChange函數(shù)),這里主要針對firefox而言,因為我們的系統(tǒng)訪問最多的是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) {
相關文章
jQuery選中select控件 無法設置selected的解決方法
select 控件的 option用jQuery動態(tài)添加,然后選中某項時,IE6不能執(zhí)行(火狐沒問題),用try{}catch(err){alert(err.description);}提示為“無法設置selected屬性 未指明的錯誤”2010-09-09jQuery+css實現(xiàn)的藍色水平二級導航菜單效果代碼
這篇文章主要介紹了jQuery+css實現(xiàn)的藍色水平二級導航菜單效果代碼,通過簡單的jQuery操作鼠標事件實現(xiàn)頁面元素樣式的切換功能,非常美觀大方,需要的朋友可以參考下2015-09-09Javascript中封裝window.open解決不兼容問題
window.open不兼容,其實不是, 因為不能直接執(zhí)行, 必須通過用戶手動觸發(fā)才行,下面有個實例,大家可以看看2014-09-09jQuery操作attr、prop、val()/text()/html()、class屬性
這篇文章主要介紹了jQuery操作attr、prop、val()/text()/html()、class屬性 ,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05