Autocomplete 自动补全(Webform实战篇)
开篇语
因为项目中需要用到一个自动补全的功能,功能描述:
需求一:新增收件人的时候,自动下拉显示出数据库中所有的收件人信息(显示的信息包括:姓名-收件地址-联系方式)
需求二:选中一个值得时候,分别赋值到对应文本框(收件人输入框中赋值 姓名,联系方式输入框中赋值 手机号,收件地址输入框中赋值 地址)
解决需求一(因本人比较懒,所以直接选用了一个比较方便的插件:Autocomplete [参考学习地址:http://www.runoob.com/jqueryui/jqueryui-use.html])
实现步骤
步骤① 去官网下载对应版本的包,然后在项目中添加这两个引用即可
步骤② 新建一个一般处理程序
步骤三③ 写查询及转换方法
1 在接口里面新增一个查询方法(接口只定义规则,不做具体实现)
2 继承接口并实现查询方法(因为功能需要,这里查询直接做了拼接,查询出来就是“收件人-地址-联系方式”)
3 方法里面调用这个方法进行json数据转换(通用方法可以直接使用)
1 // var name = context.Request["name"]; 2 // 查询的参数名称默认为term 3 string query = context.Request.QueryString["term"]; 4 context.Response.ContentType = "text/javascript"; 5 DataTable sendInfoManage = CMSModelManager.SendInfoManageDAO.Method(query);//调用查询方法,返回一个DataTable 6 //反序列化 7 System.Web.Script.Serialization.JavaScriptSerializer serailizer = new System.Web.Script.Serialization.JavaScriptSerializer(); 8 List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>(); 9 Dictionary<string, object> row; 10 foreach (DataRow dr in sendInfoManage.Rows) 11 { 12 row = new Dictionary<string, object>(); 13 foreach (DataColumn col in sendInfoManage.Columns) 14 { 15 row.Add(col.ColumnName, dr[col]); 16 } 17 rows.Add(row); 18 } 19 20 string s= serailizer.Serialize(rows); 21 context.Response.Write(s);
View Code
步骤④ 页面接收返回数据和处理返回数据
1 $(function() { 2 var name = $("#ctl00_contentPlace_txtSender").val().trim(); 3 $("#ctl00_contentPlace_txtAddressee").autocomplete({ 4 source: function(request, response) { 5 $.ajax({ 6 url: "Handler.ashx",//请求地址 7 type: "post",//请求类型 8 data: { "name": name },//参数 9 success: function(data) { 10 //console.log(data); 11 response($.map(eval(data), function(item) { //使用该插件必须要用eval()进行处理 12 //console.log(item); 13 return { 14 value: item.show,//赋值到控件上 15 result: item.show 16 } 17 })); 18 19 }, 20 error: function(xhr) { 21 console.log("发生错误"); 22 } 23 }); 24 25 }, 26 27 }); 28 }); 29
View Code
下图对应上图的数据呈现过程
页面效果
补充:这个插件默认没有滚动条,需要手动添加样式(最大高度可以自行设定)
1 <style type="text/css"> 2 .ui-autocomplete { 3 max-height: 250px; 4 overflow-y: auto; 5 /* 防止水平滚动条 */ 6 overflow-x: hidden; 7 } 8 /* IE 6 不支持 max-height 9 * 我们使用 height 代替,但是这会强制菜单总是显示为那个高度 10 */ 11 * html .ui-autocomplete { 12 height: 250px; 13 } 14 </style>
解决需求二:特意查了下Autocomplete返回值处理情况,最终选用select做处理,最后请求的ajax改为:
1 var showName = null; 2 $(function() { 3 $("#ctl00_contentPlace_txtAddressee").autocomplete({ 4 source: function(request, response) { 5 $.ajax({ 6 url: "Handler.ashx", //请求地址 7 type: "post", //请求类型 8 data: { "name": $("#ctl00_contentPlace_txtAddressee").val().trim(), "look": $("#ctl00_contentPlace_txtSendCode").val().trim() }, //参数 9 success: function(data) { 10 //console.log(data); 11 response($.map(eval(data), function(item) { //使用该插件必须要用eval()进行处理 12 //console.log(item); 13 return { 14 value: item.show, //赋值到控件上 15 result: item.show 16 } 17 })); 18 19 }, 20 error: function(xhr) { 21 console.log("发生错误"); 22 } 23 }); 24 }, 25 select: function(event, ui) { 26 var li = (ui.item.label).split("-"); 27 $("#ctl00_contentPlace_txtAddressee").val(li[0]); 28 console.log(li[0]); 29 showName = li[0]; 30 $("#ctl00_contentPlace_txtContactInfo").val(li[2]); 31 $("#ctl00_contentPlace_txtMailingAddress").val(li[1]); 32 showNames();//可以继续调用其他方法 33 } 34 }); 35 }); 36 function showNames() { 37 console.log(showName); 38 if (showName != null) { 39 $("#ctl00_contentPlace_txtAddressee").val(""); 40 $("#ctl00_contentPlace_txtMailContent").val("测试数据"); 41 } 42 }
View Code
效果展示:
选中前
选中后
天了噜,什么,竟然收件人赋值不上,找了半天原因(清空后赋值等等)。。。。。
还是没找到问题,不过因为项目急着测试,就想了个偷懒的办法,用延时再赋值的方式调了下,终于可以了
所以最终版的前台请求如下
1 var showName = null; 2 $(function() { 3 $("#ctl00_contentPlace_txtAddressee").autocomplete({ 4 source: function(request, response) { 5 $.ajax({ 6 url: "Handler.ashx", //请求地址 7 type: "post", //请求类型 8 data: { "name": $("#ctl00_contentPlace_txtAddressee").val().trim(), "look": $("#ctl00_contentPlace_txtSendCode").val().trim() }, //参数 9 success: function(data) { 10 //console.log(data); 11 response($.map(eval(data), function(item) { //使用该插件必须要用eval()进行处理 12 //console.log(item); 13 return { 14 value: item.show, //赋值到控件上 15 result: item.show 16 } 17 })); 18 }, 19 error: function(xhr) { 20 console.log("发生错误"); 21 } 22 }); 23 }, 24 select: function(event, ui) { 25 var li = (ui.item.label).split("-"); 26 $("#ctl00_contentPlace_txtAddressee").val(li[0]); 27 console.log(li[0]); 28 showName = li[0]; 29 $("#ctl00_contentPlace_txtContactInfo").val(li[2]); 30 $("#ctl00_contentPlace_txtMailingAddress").val(li[1]); 31 showNames();//可以继续调用其他方法 32 } 33 }); 34 }); 35 function showNames() { 36 if (showName != null) { 37 setTimeout(function() 38 { 39 $("#ctl00_contentPlace_txtAddressee").val(showName); 40 41 },100); 42 } 43 };
View Code
最终效果
至此,自动补全已经完成并满足需求,Autocomplete非常灵活,本文只是做了简单阐述和讲解
对Autocomplete插件更多参数和方法说明,请查阅 http://www.runoob.com/jqueryui/api-autocomplete.html
转载于:https://www.cnblogs.com/zhangxiaoyong/p/5763432.html
Autocomplete 自动补全(Webform实战篇)相关推荐
- UI标签库专题六:JEECG智能开发平台 Autocomplete(自动补全标签 )
1. Autocomplete(自动补全标签) 1.1. 参数 属性名 类型 描述 是否必须 默认值 name string 控件唯一标示 是 null minLength string 触发 ...
- spacemacs auto-complete 自动补全功能
auto-complete实现的功能只有如下:你在输入过function这个关键字后,在以后输入的时候,就会自动补全. auto-complete不能实现语言的关键字自动补全. 此操作的安装环境为:m ...
- jquery.autocomplete自动补全功能
1.jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ http:// ...
- autocomplete自动补全,远程json数据
2019独角兽企业重金招聘Python工程师标准>>> 使用前需要引入jquery的相关js,css js: $(function () {$("#orderNo" ...
- Elasticsearch生产实战(ik分词器、拼音分词、自动补全、自动纠错)
目录 一.IK分词器 1.IK分词器介绍 2.安装 3.使用 4.自定义词库 二.拼音分词器 1.拼音分词器介绍 2.安装 三.自动补全 1.效果演示 2.实战 四.自动纠错 1.场景描述 2.DSL ...
- python的cfg是什么模块_cfg4py:一个严肃的Python配置模块应有的风格-层级式、部署环境自适应、自动补全...
关于如何配置一个Python程序,如果你还停留在使用ini,json,yaml,xml等文件格式之争,或者还在为使用哪个库来加载配置纠结,只能说明你还没有开发过一个严肃认真的大型Python应用程序. ...
- 8s yaml 配置生成_cfg4py:一个严肃的Python配置模块应有的风格-层级式、部署环境自适应、自动补全...
关于如何配置一个Python程序,如果你还停留在使用ini,json,yaml,xml等文件格式之争,或者还在为使用哪个库来加载配置纠结,只能说明你还没有开发过一个严肃认真的大型Python应用程序. ...
- html 输入框自动缩短 一行内显示,JQuery UI组合框自动补全功能改进版(即时全部显示+input内容保存)...
JQuery UI Autocomplete(自动补全)功能在input前端设计中非常有用,最近一个项目正好用到,仔细研究了下组合框(combobox)的自动补全部分,官方地址是:https://jq ...
- jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...
最新文章
- Kafka配置SSL(云环境)
- 操作系统原理: 操作系统概述
- 简述tcp协议三报文握手过程_华为原理 | 传输层协议amp;交换转发原理
- Office 365系列之十二:ActiveDirectory同步
- MVVM框架理解及其原理实现
- 雷云3计算机不满足系统要求,电工进网作业许可考试(高压类)4、5、6章题库(无答案)...
- 战双帕弥什qq登录服务器未响应是什么意思,战双帕弥什qq登录
- 40个华丽的复古风格Photoshop教程
- 【LiteApp系列】爱奇艺小程序架构浅析
- R语言使用lm函数构建回归模型、使用broom包的augmented函数将模型结果存入dataframe中、使用ggplot2可视化回归残差图(拟合值和残差值的关系图)
- 报表向导的使用方法_使用报表向导在MS Access 2003中创建报表
- 数据中心系列:SDDC普及仍任重而道远
- 6.3 南丁格尔玫瑰图
- Google中文名定“谷歌” CEO施密特来华揭名
- 终于,狂神说SSM及SpringBoot系列文章完更!!!
- CH453D驱动点阵屏
- PageOffice实现文件在线安全预览——禁止编辑、下载、复制等
- Ubuntu下使用单目相机运行ORB SLAM2
- P8002 Alice and Bob are playing a Normal Game
- Android 动画标签——scale