Autocomplete 自动补全（Webform实战篇）

开篇语

因为项目中需要用到一个自动补全的功能，功能描述：

需求一：新增收件人的时候，自动下拉显示出数据库中所有的收件人信息（显示的信息包括：姓名-收件地址-联系方式）

需求二：选中一个值得时候，分别赋值到对应文本框（收件人输入框中赋值姓名，联系方式输入框中赋值手机号，收件地址输入框中赋值地址）

解决需求一（因本人比较懒，所以直接选用了一个比较方便的插件：Autocomplete [参考学习地址：http://www.runoob.com/jqueryui/jqueryui-use.html]）

实现步骤

步骤① 去官网下载对应版本的包，然后在项目中添加这两个引用即可

Autocomplete 自动补全（Webform实战篇）

步骤② 新建一个一般处理程序

Autocomplete 自动补全（Webform实战篇）

步骤三③ 写查询及转换方法

1 在接口里面新增一个查询方法（接口只定义规则，不做具体实现）

Autocomplete 自动补全（Webform实战篇）

2 继承接口并实现查询方法（因为功能需要，这里查询直接做了拼接，查询出来就是“收件人-地址-联系方式”）

Autocomplete 自动补全（Webform实战篇）

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