JQuery UI autocomplete 的功能,類似於 google 搜尋框中自動提示，用於 Web 網頁開發中的文字框的自動填充。雖然比另一個類似控制元件(http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/)簡單，但基本功能都有，配合 JQuery UI 可切換網頁介面面板的輔助功能，仍然值得一用。

只是JQuery UI autocomplete 預設的用法，中文搜尋自動提示會有亂碼。

原因在於它預設使用

 $.getJSON( url, request, response );

來獲取後臺資料，這時候 request 中的搜尋字串以未編碼格式，通過 HTTP GET 提交到後臺伺服器，導致後臺讀取資料亂碼。

網上介紹的解決辦法，大多需要同時在網頁處、後臺 J2EE server 讀資料處進行兩次 URI encode/decode，甚至有人建議直接更改 JQuery UI autocomplete 程式碼，這都很麻煩，不是最佳解決方案。

這裡介紹一種方法，那就是把 JQuery UI autocomplete 的 source 引數，從 url 改成一個 javascript 函式，通過 Ajax POST 方式，獲取資料，然後在網頁上下拉提示，程式碼很簡單:

function bind_autocomplete_event(var_jquery_obj,var_url){
 var_jquery_obj.autocomplete({
  source:function(request_paramters,response_callback){
   //JQuery UI 預設使用 getJSON 提交資料，中文會亂碼,改成用 post 提交
   jq.post(var_url,request_paramters,function(data,status){
    response_callback(data);
   });
  }
 });
}

呼叫方法：

原來的 JQuery UI autocomplete 呼叫方法:

 $("#partCd").autocomplete({

source:'../autocomplete/tm_part'

});

更改後的呼叫方法:

bind_autocomplete_event($("#partCd"),'../autocomplete/tm_part');

很簡單，對不對？

歡迎轉載。轉載請註明來源網址。