JSP
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<title>jQuery Autocomplete Plugin</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.6.min.js"></script>
<script type='text/javascript' src='<%=request.getContextPath()%>/js/jquery.autocomplete.min.js'></script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/jquery.autocomplete.css" />
<script type="text/javascript">
$().ready(function() {
$("#tags").autocomplete('<%=request.getContextPath()%>/enterprice/searchMEnterprice.do', {
minChars: 1,
width: 310,
matchContains: false,
autoFill: true,
multiple:true,
dataType:'json', // 返回的结果集为JSON数据
parse: function(data) {
return $.map(data, function(row) {
return {
data: row,
value: row.name,
result: row.name + " [" + row.id + "]" // 返回结果显示内容
}
});
},
formatItem: function(row, i, max) { // 显示下拉列表的内容
return i + "/" + max + ": \"" + row.name + "\" [" + row.id + "]";
}
}).result(function(e, item) {
$("#ids").val(item.id);
});
});
</script>
<input type="text" id='tags' />
<input type="text" id='ids' />
后台
public void searchMEnterprice()throws Exception{
PrintWriter out = null;
try {
HttpServletResponse response = getResponse();
response.setContentType("application/json;charset=GBK");
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache", "no-cache");
response.setDateHeader("Expires", 0);
String qString = getParameter("q");
qString = URLDecoder.decode(qString,"UTF-8"); // 由于中文乱码问题 转码
List<MEnterprice> mEnterprices = enterPriceDAO.getAllMEnterprice();
JSONArray jsonArray = new JSONArray();
List list = new ArrayList();
for (MEnterprice mEnterprice : mEnterprices) {
Map map = new HashMap();
String name = mEnterprice.getEnterpriceName()+"";
String id = mEnterprice.getEnterpriceId()+"";
String allPingYing = mEnterprice.getEnterpriceNameAllPingYin()+"";
String shortPingYing = mEnterprice.getEnterpriceNameShortPingYin()+"";
map.put("name",name);
map.put("id", id);
map.put("allPingYing",allPingYing );
map.put("shortPingYing" , shortPingYing);
System.out.println(qString);
if (name.contains(qString)||id.contains(qString)
|| allPingYing.contains(qString) || shortPingYing.contains(qString)) {
list.add(map);
}
}
jsonArray = JSONArray.fromObject(list);
out = response.getWriter();
out.print(jsonArray.toString());
System.out.println(jsonArray.toString());
out.close();
} catch (Exception e) {
e.printStackTrace();
}finally{
out.close();
}
}
jquery autocomplete 中文匹配时乱码
将 jquery.autocomplete.js 中的 q: lastWord(term) 编码 $.ajax({ // try to leverage ajaxQueue plugin to abort previous requests mode: "abort", // limit abortion to this input port: "autocomplete" + input.name, dataType: options.dataType, url: options.url, data: $.extend({ q: lastWord(term), limit: options.max }, extraParams), success: function(data) { var parsed = options.parse && options.parse(data) || parse(data); cache.add(term, parsed); success(term, parsed); } });
修改为
q: encodeURI(lastWord(term)),
后台取值的时候
q = URLDecoder.decode(q,"UTF-8");