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

随机推荐

数迹学——Asp.Net MVC4入门指南（4）：添加一个模型
一.添加模型类二.添加MovieDBContext类,连接数据库 DbContext类继承自 System.Data.Entity; 负责在数据库中获取,存储,更新,处理实例 MovieDBCont ...
nginx入门到精通目录
1.nginx入门篇 nginx安装与基础配置 nginx优化配置分析与说明 nginx模块结构 2.nginx功能篇配置nginx的gzip功能配置nginx的rewrite功能配置nginx ...
7、java实现的两种单例模式
/* 两种单例模式的演示 */ //饿汉式 class Signal { private Signal(){} private Signal s = new Signal(); public stat ...
Maven进价：Maven构建错误汇总
问题:The method of type must override asuperclass? annotation:@Override的原因办法:项目右键->build path-> ...
NODEJS - express
1.express组织结构 app demo |---node_modules------用于安装本地模块. |---public------------用于存放用户可以下载到的文件,比 ...
AndroidManifest.xml
一.关于AndroidManifest.xml AndroidManifest.xml 是每个android程序中必须的文件.它位于整个项目的根目录,描述了package中暴露的组件(activiti ...
剑指offer习题集1
1.打印二叉树程序很简单,但是其中犯了一个小错误,死活找不到,写代码要注意啊这里左右子树,要注意是node->left,结果写成root->left vector<int> ...
ACM好书推荐
年末感想之(渣渣的我) 仔细想想,搞比赛的日子4年有余了,确实不服老不行了,直到现在平均每天的题量都在3题左右.其实真想说,“渣渣的我”.做的题确实不少了,但是水平还是上不了档次. ...
div背景图片叠加
.box1{ width: 500px; height: 500px; background: url("")no-repeat,url("")no ...
IPTV视频基本概念
480x320, 640x480 标清 1024x720p 高清 1920x1080i (隔行扫描) 也属于高清 1920x1080p 全高清 3840x2160,7680x4320 超(高)清 ...

jQuery自动补全

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

随机推荐

热门专题