讓 Ajax Chosen 適應中文搜尋與選字

既上次的jQuery Chosen 中文搜尋狀況解決後，又遇到 Ajax Chosen 的問題。 Ajax Chosen 是英語系國家開發的，在輸入文字時沒有選字問題，但在中文就麻煩了，首先 AjaxChosen 是用最後輸入的延遲時間來自動搜尋，預設 500 毫秒，所以中文輸入法常常還來不及選字就送出去了，而一旦送出去後，選字功能會被終止掉造成無法繼續選字。

這功能可以在 AjaxChosen 初始化時藉由設定來解決，例如：

$(document).ready(function () {

    $('#ajax_input').ajaxChosen({
        type: 'GET',
        url: 'http://search.com/?params',
        dataType: 'json',
        jsonTermKey: 'query',
        afterTypeDelay: '1000', // 從這裡增加延遲時間
        minTermLength: '1'
    }, function (data) {
        // Some behavior
    });
});

但治標不治本，一來時間拉長需要等待越來越久，二來在 Windows 系統上有奇怪的現象，無論如何選字，AjaxChosen 都還是會送出最初沒有選過的錯字出去，無論用多快的速度選好都無效。看來拉長延長時間不是辦法了，只好藉由 Hack 的方式更改成按下 Enter 後才送出，才有辦法解決中文選字問題。

打開 ajax-chosen.js 的檔案，尋找：

return $(this).next('.chzn-container').find(".search-field > input, .chzn-search > input").bind('keyup', function() {

這一行（約在32行上下，不同版本可能長得不太一樣），主要功能就是用來綁定 keyup 事件，每次鍵入文字時都執行一次搜尋任務。

現在讓我們改成按下 Enter 才執行搜尋，這樣修改：

return $(this).next('.chzn-container').find(".search-field > input, .chzn-search > input").bind('keyup', function(event) {
    if( event.which != 13 ) return false; // 若不是Enter(13)，直接return整個行為

接著別忘了把延遲時間縮短：

$('#ajax_input').ajaxChosen({
    type: 'GET',
    url: 'http://search.com/?params',
    dataType: 'json',
    jsonTermKey: 'query',
    afterTypeDelay: '200', 
    minTermLength: '1'
}, function (data) {
    // Some behavior
});

成功！按下enter後立即搜尋出資料。

讓 Ajax Chosen 適應中文搜尋與選字

Written by Simon Asika on July 31, 2013

Control Tools