jQuery自动补全
方法一：
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" />
一个稍微复杂的例子，可以自定义提示列表:
1 <html xmlns="http://www.w3.org/1999/xhtml">
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;
}
}
效果图：
jQuery自动补全的更多相关文章
- jquery 自动补全控件(支持IE6)待整理
自动补全控件(兼容IE6):http://bassistance.de/ download地址:http://jquery.bassistance.de/autocomplete/jquery.aut ...
- Jquery自动补全插件的使用
1.引入css和js <script src="js/jquery-ui.min.js"></script> <link href="cs ...
- jquery的输入框自动补全功能+ajax
jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端 内容参考网友文章写成,原博的链 ...
- jQuery 邮箱下拉列表自动补全
综述 我想大家一定见到过,在某个网站填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮你自动补全邮箱的功能.现在我们就用jQuery来实现一下. 博主原创代码,如有代码写的不完善的地方还望大家多 ...
- jQuery AutoComplete 自动补全
jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...
- 复利计算器（4）——jQuery界面美化、自动补全
一.分工 这次终于可以跟小伙伴合作了,经过讨论,我负责界面的美化和输入框自动补全,小伙伴擅长安卓,于是将复利计算器弄成app的任务就交给了小伙伴.为了我们两人团队,我们都好奋斗哈哈哈!! 二.界面美化 ...
- jquery实现自动补全邮箱地址
开始做的邮箱补全代码 //检查email邮箱 function isEmail(str) { if (str.indexOf("@") > 0) { return true; ...
- jquery autocomplete实现读取sql数据库自动补全TextBox
转自我本良人 原文 jquery autocomplete实现读取sql数据库自动补全TextBox 项目需要这样子一个功能,其他部门提的意见,只好去实现了哦,搞了好久才弄出来,分享一下. 1.前台页 ...
- jquery.autocomplete自动补全功能
项目实例: 一:js //SupplierAutoComplete.js $().ready(function () { $("#txtSupplier").autocomplet ...
随机推荐
- 根据 url请求数据
public static JSONObject getJsonFromUrl(String url){ CloseableHttpClient httpClient = HttpClients.cr ...
- java中，去除空白的方法
有时候,我们页面传过来的值,或者做excel导入时填入的值都需要去掉像空格一样的一些特殊字符,下面这个方法可去掉像制表符,换行键,回车,空格或者不在ACSII中 的特殊字符 /** * 去除字符串开始 ...
- SQLite手工注入方法小结
SQLite 官网下载:www.sqlite.org/download.html sqlite管理工具:http://www.yunqa.de/delphi/products/sqlitespy/in ...
- android之 listview加载性能优化ViewHolder
在android开发中Listview是一个很重要的组件,它以列表的形式根据数据的长自适应展示具体内容,用户可以自由的定义listview每一列的布局,但当listview有大量的数据需要加载的时候, ...
- javascript中的事件委托
这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是 ...
- 如何正确做 Web端压力测试？
一个完整的压力测试需要关注三个方面:如何正确产生压力.如何定位瓶颈.如何预估系统的承载能力. (1) 如何产生压力:产生压力的方法有很多,通常可以写脚本产生压力机器人对服务器进 ...
- MSSQL FOR MXL PATH 运用(转载)
FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...
- 读文档readarx.chm
readarx.chm <Tips and Techniques> Incremented AutoCAD Registry Number Ideally, a change of reg ...
- Python Mysql 篇
Python 操作 Mysql 模块的安装 linux: yum install MySQL-python window: http://files.cnblogs.com/files/wupeiqi ...
- 单节点nginx为两台apache服务器提供负载均衡
需求:本实验为单节点nginx为两台apache服务器提供负载均衡,所有配置为最简单 1.初始化3台测试server,该关的关了 [root@host101 ~]# vim /etc/hosts 19 ...