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 ...
随机推荐
- 解决ListView和ScrollView同时使用时滑动的冲突问题
ScrollView外面包裹了一个ListView,解决其滑动冲突问题: 只需自定义ListView,命名MyListView: public class MyListView extends Lis ...
- ListView中itemz中控件的点击事件和条目点击事件冲突
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
- NSString字符串
要把 “2011-11-29” 改写成 “2011/11/29”一开始想用ios的时间格式,后来用NSString的方法搞定. [string stringByReplacingOccurrences ...
- C中变量名通过宏定义转换成char*类型字符串
#include <iostream> #include <stdlib.h> #define name_to_str(name)(#name) int main() { in ...
- CSS + DIV 让页脚始终保持在页面底部
来源:David's Blog http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...
- PC安装了MAC，那么CMD键和OPTION键什么的在哪里？
OS X中Command键所在的位置对应windows中Alt键的位置,OS X中Option键对应windows中Shift键的位置.如果使用中有不习惯的地方,可以通过设置修改,具体方法如下: 1. ...
- [2014.01.27]WFsoft.wfWebCtrl.wfUrlPager 3.2
wfUrlPager多功能.Net翻页组件,使用简单,功能强大. 提供"首页","上一页","下一页","末页",&qu ...
- SilverlightOA源代码（可用于企业级Silverlight项目的二次开发，长年有效）
Silverlight OA系统简介 系统功能简介 l 程序界面介绍: 左侧为主菜单,主菜单可以展开和收起,主菜单下面的所有模块都可以在数据库中扩展增加,模块的权限和用户角色挂钩,可以在数据库中创建多 ...
- ios7 indexPathForCell 的坑（真是一个大大的坑）
笔者在编写APP 有一个功能点击cell上一个button,修改cell的在tableview中的位置 在ios8上没有问题. 在ios7上总是崩溃 以下是崩溃后提示: Terminating app ...
- div+css样式
Div+Css 随着页面上的需求变大,许多的东西不再使用单纯的图片.按钮.文字,而是通过Div+Css来实现按钮,公司的需求就是这样,一直在弄这个模块,顺便的总结一下 列如下面的页面都是通过div+c ...