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');
很简单,对不对?