关键字：智能搜索提示功能
推荐一：http://site518.net/jquery-add-tags-with-tagbox-plugin/
推荐二：https://github.com/aehlke/tag-it/
jquery2012年最新各种插件推荐：http://kouriba.iteye.com/blog/1628769
[color=red]以下直接pass掉，不用了[/color]
附件是完整的例子，希望对大家有所帮助，谢谢
[color=red]说明：推荐下载：autocomplete（2013.11.28）.rar[/color]
其他推荐：推荐jqeury.autocomplete，(jqeury.ui.autocomplete依赖比较多所以不用)
参数介绍：
a:http://bcyy.iteye.com/blog/1809135
b:http://chenling1018.blog.163.com/blog/static/148025420101250354380
例子：http://zld406504302.iteye.com/blog/1900654
2：http://iwebcode.iteye.com/blog/1791740
3：http://shihuan830619.iteye.com/blog/1629637
4：http://dada-fangfang.iteye.com/blog/695464
5:http://zld406504302.iteye.com/blog/1900654
6:
下面是完整的例子：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/jquery.autocomplete.css"/>
<script src="${pageContext.request.contextPath}/js/jquery-1.3.2.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.autocomplete.js"></script>
<script type="text/javascript">
function test2(){
//http://localhost:8080/shoppingCenter/shoppingCenter/shoppingCenter/gGoods_test.action
alert($("#test").val());
}
$().ready(function() {
var emails9 = [{ 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" }];;;;
var data = "哈哈哈 Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities 赵士杰".split(" ");
/*
1、后台默认获取参数名称：q，即可获取用户输入字符串
2、url:http://localhost:8080/shoppingCenter/shoppingCenter/shoppingCenter/gGoods_test.action
*/
$("#test2").autocomplete("http://localhost:8080/shoppingCenter/shoppingCenter/shoppingCenter/gGoods_test.action", {
dataType:"json",
minChars: 0,//在触发autoComplete前用户至少需要输入的字符数.Default: 1，如果设为0，在输入框内双击或者删除输入框内内容时显示列表
max: 16,//下拉框最多显示数目
width: 390,//下拉框宽度
//matchContains: false,//决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false
//autoFill: false,// 要不要在用户选择时自动将用户当前鼠标所在的值填入到input框. Default: false
multiple:true,//是否允许多选
mustMatch: false,// 作用效果就是自动清空不匹配的输入
multipleSeparator:",",//多选时分割符号
//scrollHeight:220,//自动完成提示的卷轴高度用像素大小表示 Default: 180
//cacheLength:10,//缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存.Default: 10
//matchSubset:true,// autoComplete可不可以使用对服务器查询的缓存,如果缓存对foo的查询结果,那么如果用户输入foo就不需要再进行检索了,直接使用缓存.通常是打开这个选项以减轻服务器的负担以提高性能.只会在缓存长度大于1时有效.Default: true
//scroll:true,// 当结果集大于默认高度时是否使用卷轴(滚动条)显示 Default: true
extraParams: {//这里是自定义提交给action参数（queryStr名称可以自定义）
queryStr: function() { return $("#tttt").val(); }
},
//加入对action返回的json对象进行解析函数，函数返回一个数组
parse:function(data){
var rows = [];
for(var i=0; i<data.length; i++){
rows[rows.length] = {
//显示在下拉框列表的值
data:data[i].name + "-" + data[i].to,
value:data[i].to,
//最终选择后放到input框里的值
result:data[i].to
};
}
return rows;
},
//最终显示在下来列表中的每一条数据(row是parse函数返回的rows中的data属性)
formatItem:function(row, i, max) {
// alert(row);
return row;
//return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
},
formatMatch:function(row, i, max) {
//alert(row+"=======================");
return row.name + " " + row.to;
},
formatResult:function(row, i, max) {
$("#tttt").val(row);
return row.to;;
//alert(row+"-------------------------------");
//return row;
},
//此事件会在用户选中某一项后触发，参数为：
//event: 事件对象. event.type为result.
//data: 选中的数据行.
result:function(event,data){
alert(event.type);
}
});
//这里每一次用户选择都会触发的函数，可以给隐藏域赋值
$("#test2").result(function(event, data, formatted) {
alert(data); alert(event.type); alert(formatted);
$("#tttt").val(data);
});
});
</script>
</head>
<body>
This is my JSP page. <br>
<input type="text" size="100" value="" name="test" id="test2"/>
<input type="text" size="100" value="" name="tttt" id="tttt"/>
<input type="button" οnclick="test();" value="test()"/>
</body>
</html>
服务器端代码（struts2的action）：
public String test() throws IOException{
String queryStr = getRequest().getParameter("queryStr");
String id = getRequest().getParameter("id");
String search = getRequest().getParameter("q");
if(search==null||search.length()==0) return null;
List<String> names = new ArrayList<String>();
names.add("张三");
names.add("李四");
names.add("王五");
getResponse().setCharacterEncoding("UTF-8");
JSONArray json = JSONArray.fromObject(names);
JSONArray list = new JSONArray();
JSONObject o1 = new JSONObject();
o1.put("name", "张三");
o1.put("to", "张三@126.com");
o1.put("id", "1");
JSONObject o2 = new JSONObject();
o2.put("name", "李四");
o2.put("to", "李四@126.com");
o2.put("id", "2");
JSONObject o3= new JSONObject();
o3.put("name", "王五");
o3.put("to", "王五@126.com");
o3.put("id", "3");
JSONObject o4= new JSONObject();
o4.put("name", "赵士杰");
o4.put("to", "赵士杰@126.com");
o4.put("id", "4");
list.add(o1);
list.add(o2);
list.add(o3);
list.add(o4);
list.add(o4);
PrintWriter out = getResponse().getWriter();
out.print(list);
out.flush();
out.close();
return null;
}
