jQuery自动补全

方法一：

jquery-autocomplete配置：

一个稍微复杂的例子，可以自定义提示列表:


 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配置：

<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 ...

随机推荐

Egit Patch
Git为我们提供了Patch功能,Patch中包含了源码更改的描述,能够应用于其他Eclipse工作空间或者Git仓库.也就是说,可以将当前提交导出至其他分支或者项目中. 举个例子,项目A.B中使用了 ...
Python条件语句
1.简介多个条件判断,用elif语句. 如果判断需要多个条件需同时判断时,可以使用 or (或),表示两个条件有一个成立时判断条件成功: 使用 and (与)时,表示只有两个条件同时成立的情况下,判 ...
python 元组操作
关于元组的常用操作,请参考:http://www.runoob.com/python/python-tuples.html 元组的元素不可修改 ,元组的元素的元素可修改 count(self,valu ...
sqlserver 跨服务器访问数据
需求:两个一模一样的表,分别分布在两个服务器的数据库上,现在要在一个表中,查看这两个表的内容,并让Id排序 1:在本地数据库查询分析器中,运行以下两段语句: --创建链接服务器 exec sp_add ...
Oracle表空间不足
Oracle临时表空间不足 -- 用户的缺省表空间.临时表空间 select t.username, t.default_tablespace, t.temporary_tablespace from ...
Oracle11g的delayed failed logins特性引起的性能问题
用户反映修改密码后程序明显变慢,查看AWR发现: ASH信息如下: 进一步验证: SQL>select event,p1 from v$session t where t.username is ...
Visual Studio技巧之打造拥有自己标识的代码模板
可能经过很多博客的介绍,大家都知道代码段的使用,使用代码段可以很方便地生成一些常用的代码格式,确实对我们开发很方便.在团队开发中或者在某些情况下我们经常可能还会希望使用Visual Studio生成的 ...
BizTalk 中使用 WCF-OracleDB adapter
在使用BizTalk WCF-OracleDB adapter操作Oracle数据库时,遇到了一些问题,记录如下. 按照BizTalk的文档,目前BizTalk 2010支持的Oracle数据库版本如 ...
根据ip判断地区，IP接口
大型网站提供的IP API接口调用方法 [淘宝]的IP地址查询接口:http://ip.taobao.com/service/getIpInfo.php?ip=218.192.3.42[新浪]的IP地 ...
Android OpenCV 图像识别
最近打算写一个android 平台opencv 的小程序,着手查找了一下资料.网络上的资料参差不齐,有一些都比较老旧,我参考了前面的方法找到了一个简单的搭建方法,分享给大家. 0,环境的搭建: jav ...

jQuery自动补全

jQuery自动补全的更多相关文章

随机推荐

热门专题