firefox 上 jquery plugin autocomplete 輸入中文

如題在ie上可以正常的輸入中文字串做為查詢的依據,但是當我們把場景移到firefox上的時後。
總是要在已有輸入的欄位上再補上方向鍵,才會將那個選單給跳出來。

這樣就失去了autocomplete原本的用意,變的不夠直覺。

在網路上搜尋並且自已在那邊測試了半天,發現網上大部的文章都是教我們來修改物件綁定的事件來完成這樣的工作。像是下面這樣

$input.bind(($.browser.opera ? “keypress" : “keydown") + “.autocomplete", function(event) { …省略…

將上面的keydown字串改為keyup字串,這樣做得確可以讓我們輸入中文字串後跳出候選名單。但是這樣的話,有些autocomplete的按鍵所觸發的方法卻變的沒有任何作用了(選單的操作),當然這是有提供解決辦法。辦法是將物件再多綁定一個專屬於firefox的事件。

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

onChange()是autocomplete plugin裏的function,只是現在這們把它拿來用罷了。

經過重新綁定之後,果然可以正常的操作選單了。但是…

當我們要移動選定的遊標時,必需要連按好多下方向鍵它才會照我們的意思來移動有點不方便說。

所以我將它改成了

$input.bind(($.browser.opera || $.browser.mozilla ? “keypress" : “keydown") + “.autocomplete", function(event) { …省略…

上面是除了opera 和mozilla的瀏覽器之外都綁定keydown事件,不再用keyup事件了。這樣操作選單也變的順暢多了。

總結:

無改的地方有兩處,
(1) $input.bind(“input", function() { onChange(0, true); }); //新加的程式碼片段
(2) $input.bind(($.browser.opera || $.browser.mozilla ? “keypress" : “keydown") + “.autocomplete", function(event) { …省略…

備註:
options該如何帶入參數呢?使用 {key: value,key1:vlaue1} json鍵值對的方式
autocomplete 使用模糊搜尋,記得要將options的參數 matchContains設定成true ,它的default為false

width: int 修改選單的寬度,max: int 最大的cache大小

//formatItem 將資料來源依照我們需求的樣式顯示
formatItem: function(row, i, max) {
return i + “/" + max + “: “" + row.key + “" [" + row.value + “]";
},
//將資料來源把我們想要拿出來做索引的資料格式,例如下面我們輸入的樣式將會索引比對下列的樣式
formatMatch: function(row, i, max) {
return row.key + " " + row.value;
},
//這是最後我們選定了資料列之後,設定我們想要填入的資料格式
formatResult: function(row) {
return row.key+’ ‘+row.value;
}

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s