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 ...
随机推荐
- REST概念和应用 - TODO
Motivation Sometimes I fell like giving up, then I remember I have a lot of motherfuckers to prove w ...
- mysql出现启动不了问题
查询日志后是‘ Fatal error: Can't open and lock privilege tables: Table 'mysql.host' doesn't exist’此错误(less ...
- DataItem,gridview,repeater数据控件数据绑定
Container.DataItem几种方式. 在绑定数据时经常会用到这个句程序:<%# DataBinder.Eval(Container.DataItem,"xxxx") ...
- mysql系统库INFORMATION_SCHEMA,MySQL,TEST,mysql系统表的作用
本文简要说明了MySQL数据库安装好后自带的INFORMATION_SCHEMA,MySQL,TEST三个数据库的用途. 第一个数据库INFORMATION_SCHEMA: 提供了访问数据库元数据的方 ...
- Docker run命令详解 转
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 Usage: doc ...
- 如何理解andriod中的View和framelayout两个概念
View 和 FrameLayout 是包含关系,FrameLayout 继承自ViewGroup,然后继承自View. FrameLayout是一种 ViewGroup,可以在里面放其它的View, ...
- SpringMVC学习系列-后记 开启项目的OpenSessionInView
在系列的 SpringMVC学习系列(12) 完结篇 的示例项目中,由于当时考虑到OpenSessionInView会对性能有一定的影响,所以就没有配置项目的OpenSessionInView.在ma ...
- Composer设置忽略版本匹配的方法
Composer简介 Composer 是 PHP 的一个依赖管理工具.它允许你申明项目所依赖的代码库,它会在你的项目中为你安装他们.Composer 不是一个包管理器.是的,它涉及 "pa ...
- < 独立项目 - 文本挖掘 > - 2016/11/13 第二更 - <Python环境准备>
< 独立项目 - 文本挖掘 > 项目立项的相关背景介绍,TODO方向. 一.Ubuntu环境配置 主机系统:Windows 7 SP1 64位操作系统 | i5-4210 CPU | ...
- [HTML5]块和内联元素的嵌套
块元素可以包含块或内联元素,但是内联元素只能包含其他内联元素. <!-- 无效代码! :-( --> <strong> <p>你不应该把p元素放在 "st ...