快捷導(dǎo)航

修改jQuery.Autocomplete插件支持中文輸入法避免TAB、ENTER鍵失效、導(dǎo)致表單提交

更新時(shí)間：2009年10月11日 13:55:13 作者：

jQuery.Autocomplete 是jquery的流行插件，能夠很好的實(shí)現(xiàn)輸入框的自動(dòng)完成(autocomplete)、建議提示(input suggest)功能，支持ajax數(shù)據(jù)加載。

但唯一遺憾的是，在對(duì)中文輸入法打開(kāi)時(shí)，firefox3.0中是對(duì)中文拼音的自動(dòng)匹配，而對(duì)輸入后的中文無(wú)法及時(shí)觸發(fā)匹配；而在我的IE6.0下，則無(wú)此問(wèn)題。
原因分析：
Autocomplete插件對(duì)用戶輸入字符的觸發(fā)自動(dòng)匹配是通過(guò)”keydown”事件進(jìn)行的（可分析jquery.autocomplete.js第 92行），在IE6中，當(dāng)輸入法打開(kāi)時(shí)，輸入的字符是不會(huì)觸發(fā)”keydown”的，只有中文輸入完畢才觸發(fā)之，所以中文輸入和latin文沒(méi)有區(qū)別的；但在firefox3.0下，無(wú)論輸入法打開(kāi)否，按鍵都會(huì)觸發(fā)”keydown”事件，所以造成中文輸入完畢，自動(dòng)匹配的是剛才打出的部分中文拼音字母。 ------所以只有Firefox有問(wèn)題。
解決方法：
網(wǎng)上查到的最多做法是修改jquery.autocomplete.js第92行，將”keydown”替換為”keyup”，但這個(gè)不是根本辦法，雖然這樣改后可在firefox中及時(shí)對(duì)輸入的中文進(jìn)行自動(dòng)匹配，但將原插件中回車、tab等重要的事件機(jī)制破壞了，比如這樣改后，如果你的input是在一個(gè)form里的話，回車從原來(lái)的將選定項(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)訪問(wèn)最多的是IE和firefox。而恰好firefox有一個(gè)input變化的事件就是oninput，那么我們只要在原jquery.autocomplete.js第199行，插入如下代碼：

復(fù)制代碼代碼如下:

 
.bind("input", function() { 
// @hack:support for inputing chinese characters in firefox 
onChange(0, true); 
}); 

插入后，代碼大概如下：

復(fù)制代碼代碼如下:

 
... 
... 
jQueryinput.unbind(); 
jQuery(input.form).unbind(".autocomplete"); 
}).bind("input", function() { 
// @hack:support for inputing chinese characters in firefox 
onChange(0, true); 
}); 
... 

您可能感興趣的文章: