标签：
因为项目中需要用到一个自动补全的功能，功能描述：
需求一：新增收件人的时候，自动下拉显示出数据库中所有的收件人信息（显示的信息包括：姓名-收件地址-联系方式）
需求二：选中一个值得时候，分别赋值到对应文本框（收件人输入框中赋值 姓名，联系方式输入框中赋值 手机号，收件地址输入框中赋值 地址）
解决需求一（因本人比较懒，所以直接选用了一个比较方便的插件：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);
步骤④ 页面接收返回数据和处理返回数据
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
页面效果：
补充：这个插件默认没有滚动条，需要手动添加样式（最大高度可以自行设定）
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>
第一个需求结束，第二个需求正在进行中。。。后面更新。。。。
太晚了。。。睡觉了～
标签：
原文地址：http://www.cnblogs.com/zhangxiaoyong/p/5763432.html
