jquery autocomplete

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

 

评论

1 楼 FrankWong1213 2012-09-20  

路过，支持！