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 ...
随机推荐
- div滚动条弹出层效果 （所需要的css文件和js文件，都已经上传到文件里面了progressbar.rar）
<%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...
- distributed 以及 distributional 语义表达的区别
昨天在审核资讯翻译的时候遇到这两个单词,文章里讲的也不清楚,感觉翻译的也不到位.今天就单独拿出来比较一下吧.尽管这两个单词相似,它们的具体实现方法还是有很大区别的. Distributional wo ...
- js中获得指定范围的n个不重复的随机数
function getarray(arr,num){ //复制数组,不能直接在原数组上修改 var temparr=new Array(); //遍历原数组 for(var i in arr){ / ...
- 在yii中使用多个数据库
背景: 对于一个大公司拥有多个分公司的应用场景下,我们通常需要配置多个sub-database(子数据库)来存储不同的数据纪录. 配置步骤: 1.在application骨架里面的主配置文件main. ...
- Smarty 分页
1 <div id="pagelist" class="clearfix">2 <a href="/canadian-sai ...
- 2016HUAS_ACM暑假集训1A - 士兵队列训练问题
这道题我觉得是个简单的模拟题,整理一下思路,弄清楚题意就好了. 新手上路,采用两个数组进行交互赋值,用的方法也比较笨,思路差不多都在代码的注释里了. 下面是题目大意: 首先将士兵从1开始编号(士兵总数 ...
- 组合模式（Composite Pattern）
组合模式主要用来处理一类具有“容器特征”的对象——即它们在充当对象的同时,又可以作为容器包含其他多个对象. 组合模式实现的最关键的地方是——简单对象和复合对象必须实现相同的接口.这就是组合模式能够将组 ...
- php 函数preg_match、preg_match_all ，以及正则表达式规则
<?php $str = 'php is the best language phhhhp is'; $part = '/ph{1,}p/'; echo preg_match($part, $s ...
- 单例设计模式getInstance()
对象的实例化方法,也是比较多的,最常用的方法是直接使用new,而这是最普通的,如果要考虑到其它的需要,如单实例模式,层次间调用等等. 直接使用new就不可以实现好的设计好,这时候需要使用间接使用n ...
- .net中常用的几种页面间传递参数的方法
转自:http://www.cnblogs.com/lxshanye/archive/2013/04/11/3014207.html 参考:http://www.cnblogs.com/zhangka ...