1. 程式人生 > >jquery自動完成(ajax)

jquery自動完成(ajax)

<script type="text/javascript" src="js/jquery/jquery.autocomplete.js"></script>

<linkrel="stylesheet"type="text/css"href="js/jquery/jquery.autocomplete.css"/>

<script type="text/javascript">

$().ready(function() {

$("#level1Name").autocomplete("levelAutoCompleteAjaxAction.do");

$("#level2Name").autocomplete("levelAutoCompleteAjaxAction.do");

$("#level3Name").autocomplete("levelAutoCompleteAjaxAction.do");

});

</script>

<input type="text" id="level1Name" />

<input type="text" id="level2Name" />

<input type="text" id="level3Name" />

使用時$("#level1Name")<input type="text" id="level1Name" />中的id

autocomplete("levelAutoCompleteAjaxAction.do")

為傳送的urlajax請求地址

幾行程式碼,如此簡單而已!

說明一下為了支援中文輸入,需要修改jquery.autocomplete.js檔案的幾個地方,在檔案的190多行左右,加上如下程式碼:

.bind("input", function() {

// @hack by liqt:support for inputingchinese charactersin firefox

onChange(0, true);

})

即可。以下是網上說明:

jQuery.Autocompletejquery的流行外掛,能夠很好的實現輸入框的自動完成(autocomplete)、建議提示(input suggest)

功能,支援ajax資料載入。

但唯一遺憾的是,在對中文輸入法開啟時,firefox3.0中是對中文拼音的自動匹配,而對輸入後的中文無法及時觸發匹配;而在我的IE6.0下,則無此問題。

原因分析:

Autocomplete外掛對使用者輸入字元的觸發自動匹配是通過”keydown”事件進行的(可分析jquery.autocomplete.js92行),在IE6中,當輸入法開啟時,輸入的字元是不會觸發”keydown”的,只有中文輸入完畢才觸發之,所以中文輸入和latin文沒有區別的;但在firefox3.0下,無論輸入法開啟否,按鍵都會觸發”keydown”事件,所以造成中文輸入完畢,自動匹配的是剛才打出的部分中文拼音字母。

解決方法:

網上查到的最多做法是修改jquery.autocomplete.js92行,將”keydown”替換為”keyup”,但這個不是根本辦法,雖然這樣改後可在firefox中及時對輸入的中文進行自動匹配,但將原外掛中回車、tab等重要的事件機制破壞了,比如這樣改後,如果你的input是在一個form裡的話,回車從原來的將選定項輸入到input中變為了直接提交form表單了,這並不是我們想要的。

我的方法原理是,補充一個原外掛觸發查詢的事件,就是當input輸入欄發生字元變化時,重新進行查詢(呼叫其內部的onChange函式),這裡主要針對firefox而言,因為我們的系統訪問最多的是IEfirefox。而恰好firefox有一個input變化的事件就是oninput,那麼我們只要在原jquery.autocomplete.js199行,插入如下程式碼:

1..bind("input", function() {

2.// @hack by liqt:support for inputingchinese charactersin firefox

3.onChange(0, true);

4.});