JQuery UI autocomplete 中文亂碼的解決方案

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');

 

很簡單，對不對？

 

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