struts +JQuery AutoComplete 自动补齐-优快云博客

package com.bpsoft.servlet;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

public class AutoComplete extends Action{
	/**
	 * 返回json数据格式
	 */
	@Override
	public ActionForward execute(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {
	       response.setContentType("application/json; charset=UTF-8");   
	       PrintWriter out = response.getWriter();   
       String q = request.getParameter("q");//补全值
       System.err.println(request.getParameter("limit")+"===================");//每次最多显示多少行
	     String value= "[{ name: \"Peter Pan\", to: \"peter@pan.de\" }," +
	     		"{ name: \"Molly\", to: \"molly@yahoo.com\" }," +
	     		"{ name: \"Forneria Marconi\", to: \"live@japan.jp\" }," +
	     		"{ name: \"Master <em>Sync</em>\", to: \"205bw@samsung.com\" }," +
	     		"{ name: \"Dr. <strong>Tech</strong> de Log\", to: \"g15@logitech.com\" }," +
	     		"{ name: \"Don Corleone\", to: \"don@vegas.com\" }," +
	     		"{ name: \"Mc Chick\", to: \"info@donalds.org\" }," +
	     		"{ name: \"Donnie Darko\", to: \"dd@timeshift.info\" }," +
	     		"{ name: \"Quake The Net\", to: \"webmaster@quakenet.org\" }," +
	     		"{ name: \"Dr. Write\", to: \"write@writable.com\" }]";
	       System.out.println(value);   
	       System.out.println(q);   
		  out.print(value);   
	      out.flush();   
	      out.close();   
		return null;
	}
	
	
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery Autocomplete Plugin</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type='text/javascript' src='../js/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<link rel="stylesheet" type="text/css" href="../css/jquery.autocomplete.css" />

	
<script type="text/javascript">
$(function() {
	function format(mail) {
		return mail.name + " &lt;" + mail.to + "&gt";
	}
	$("#email").autocomplete('../auto.do', {
		multiple: false,
		dataType: "json",
		minChars: 2,
		scroll: true,
		max: 4,
		//extraParams: {'selectedrow':},
		scrollHeight: 100,
		parse: function(data) {
			return $.map(data, function(row) {
				return {
					data: row,
					value: row.name,
					result: row.name
				}
			});
		},
		formatItem: function(item) {
			return format(item);
		}
	}).result(function(e, item){
		$("#userid").val(item.to);
	});
});
</script>
	
</head>

<body>

<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/">jQuery Autocomplete Plugin</a> Demo</h1>
<input type="text" id="userid" />
<div id="content">
	
	<form autocomplete="off">
		<p>
			<label>E-Mail (remote json):</label>
			<input type="text" id="email"></textarea>
		</p>
		
		<input type="submit" value="Submit" />
	</form>
	
	<a href="emails.phps">Server-side script creating the JSON data</a>

</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
//_uacct = "UA-2623402-1";
//urchinTracker();
</script>
</body>
</html>

中文乱码解决办法：修改jQuery。autocomplete.js中Ajax方法，将Ajax请求方式改为：post请求

   $.ajax({
    // try to leverage ajaxQueue plugin to abort previous requests
    type:'POST',//这个就是修改地方
    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);
    }
   });