方法一：
jquery-autocomplete配置：
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
<link rel="Stylesheet" href="/js/jquery.autocomplete.css" />
一个稍微复杂的例子，可以自定义提示列表:
2 <head runat="server">
3 <title>自定义提示</title>
4 <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
5 <script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
6 <link rel="Stylesheet" href="/js/jquery.autocomplete.css" />
7 <script type="text/javascript">
8 var emails = [
9 { name: "Peter Pan", to: "peter@pan.de" },
10 { name: "Molly", to: "molly@yahoo.com" },
11 { name: "Forneria Marconi", to: "live@japan.jp" },
12 { name: "Master <em>Sync</em>", to: "205bw@samsung.com" },
13 { name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },
14 { name: "Don Corleone", to: "don@vegas.com" },
15 { name: "Mc Chick", to: "info@donalds.org" },
16 { name: "Donnie Darko", to: "dd@timeshift.info" },
17 { name: "Quake The Net", to: "webmaster@quakenet.org" },
18 { name: "Dr. Write", to: "write@writable.com" },
19 { name: "GG Bond", to: "Bond@qq.com" },
20 { name: "Zhuzhu Xia", to: "zhuzhu@qq.com" }
21 ];
22
23 $(function() {
24 $('#keyword').autocomplete(emails, {
25 max: 12, //列表里的条目数
26 minChars: 0, //自动完成激活之前填入的最小字符
27 width: 400, //提示的宽度，溢出隐藏
28 scrollHeight: 300, //提示的高度，溢出显示滚动条
29 matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
30 autoFill: false, //自动填充
31 formatItem: function(row, i, max) {
32 return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';
33 },
34 formatMatch: function(row, i, max) {
35 return row.name + row.to;
36 },
37 formatResult: function(row) {
38 return row.to;
39 }
40 }).result(function(event, row, formatted) {
41 alert(row.to);
42 });
43 });
44 </script>
45 </head>
46 <body>
47 <form id="form1" runat="server">
48 <div>
49 <input id="keyword" />
50 <input id="getValue" value="GetValue" type="button" />
51 </div>
52 </form>
53 </body>
54 </html>
方法二： jeecg框架用t:autocomplete标签
jquery-autocomplete配置：
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
<link rel="Stylesheet" href="/js/jquery.autocomplete.css" />
<t:autocomplete minLength="1"
dataSource="commonController.do?getAutoList" closefun="close"
valueField="belongDept.id" searchField="departcode,departname"
labelField="departcode,departname" parse="parse"
formatItem="formatDepart" result="callBackDepart"
name="belongDept" entityName="TSDepart" nullmsg=" " sucmsg=" "
datatype="*" maxRows="5" errormsg="数据不存在,请重新输入"
label="${planPage.belongDept.departname}" ignore="ignore"
value="${planPage.belongDept.id}"></t:autocomplete>
后台：
controller类：
/**
* 自动完成请求返回数据
*
* @param request
* @param responss
*/
@RequestMapping(params = "getAutoList")
public void getAutoList(HttpServletRequest request, HttpServletResponse response, Autocomplete autocomplete) {
String jsonp = request.getParameter("jsonpcallback");
String trem = StringUtil.getEncodePra(request.getParameter("trem"));// 重新解析参数
autocomplete.setTrem(trem);
List autoList = systemService.getAutoList(autocomplete);
String labelFields = autocomplete.getLabelField();
String[] fieldArr = labelFields.split(",");
String valueField = autocomplete.getValueField();
String[] allFieldArr = null;
if (StringUtil.isNotEmpty(valueField)) {
allFieldArr = new String[fieldArr.length+1];
for (int i=0; i<fieldArr.length; i++) {
allFieldArr[i] = fieldArr[i];
}
allFieldArr[fieldArr.length] = valueField;
}
try {
String str = TagUtil.getAutoList(autocomplete, autoList);
str = "(" + str + ")";
response.setContentType("application/json;charset=UTF-8");
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
response.getWriter().write(JSONHelper.listtojson(allFieldArr,allFieldArr.length,autoList));
response.getWriter().flush();
response.getWriter().close();
} catch (Exception e1) {
e1.printStackTrace();
}
}
service类：
public <T> List<T> getAutoList(Autocomplete autocomplete) {
StringBuffer sb = new StringBuffer("");
for(String searchField:autocomplete.getSearchField().split(",")){
sb.append(" or "+searchField+" like '%"+autocomplete.getTrem() + "%' ");
}
String hql = "from " + autocomplete.getEntityName() + " where 1!=1 " + sb.toString();
return commonDao.getSession().createQuery(hql).setFirstResult(autocomplete.getCurPage()-1).setMaxResults(autocomplete.getMaxRows()).list();
}
TagUtil类：
/**
* 循环LIST对象拼接自动完成控件数据
* @param fields
* @param total
* @param list
* @throws Exception
*/
public static String getAutoList(Autocomplete autocomplete, List list) throws Exception {
String field=autocomplete.getLabelField()+","+autocomplete.getValueField();
String[] fields=field.split(",");
Object[] values = new Object[fields.length];
String jsonTemp = "{\'totalResultsCount\':1,\'geonames\':[";
if(list.size()>0){
for (int j = 0; j < list.size(); j++) {
jsonTemp = jsonTemp + "{'nodate':'yes',";
for (int i = 0; i < fields.length; i++) {
String fieldName = fields[i].toString();
values[i] = fieldNametoValues(fieldName, list.get(j));
jsonTemp = jsonTemp + "\'" + fieldName + "\'" + ":\'" + values[i] + "\'";
if (i != fields.length - 1) {
jsonTemp = jsonTemp + ",";
}
}
if (j != list.size() - 1) {
jsonTemp = jsonTemp + "},";
} else {
jsonTemp = jsonTemp + "}";
}
}
}else {
jsonTemp+="{'nodate':'数据不存在'}";
}
jsonTemp = jsonTemp + "]}";
return JSONObject.fromObject(jsonTemp).toString();
}
JSONHelper.listtojson()方法：
public static String listtojson(String[] fields, int total, List list) throws Exception {
Object[] values = new Object[fields.length];
String jsonTemp = "{\"total\":" + total + ",\"rows\":[";
for (int j = 0; j < list.size(); j++) {
jsonTemp = jsonTemp + "{\"state\":\"closed\",";
for (int i = 0; i < fields.length; i++) {
String fieldName = fields[i].toString();
values[i] = org.jeecgframework.tag.core.easyui.TagUtil.fieldNametoValues(fieldName, list.get(j));
jsonTemp = jsonTemp + "\"" + fieldName + "\"" + ":\"" + values[i] + "\"";
if (i != fields.length - 1) {
jsonTemp = jsonTemp + ",";
}
}
if (j != list.size() - 1) {
jsonTemp = jsonTemp + "},";
} else {
jsonTemp = jsonTemp + "}";
}
}
jsonTemp = jsonTemp + "]}";
return jsonTemp;
}
}
效果图：
