Autocomplete 自動補全（Webform實戰篇）

時間 2019-11-25

標籤 autocomplete 自動補全 webform 實戰简体版

原文原文鏈接

開篇語

由於項目中須要用到一個自動補全的功能，功能描述：javascript

需求一：新增收件人的時候，自動下拉顯示出數據庫中全部的收件人信息（顯示的信息包括：姓名-收件地址-聯繫方式）css

需求二：選中一個值得時候，分別賦值到對應文本框（收件人輸入框中賦值姓名，聯繫方式輸入框中賦值手機號，收件地址輸入框中賦值地址）html

解決需求一（因本人比較懶，因此直接選用了一個比較方便的插件：Autocomplete [參考學習地址：http://www.runoob.com/jqueryui/jqueryui-use.html]）java

實現步驟

步驟① 去官網下載對應版本的包，而後在項目中添加這兩個引用便可jquery

步驟② 新建一個通常處理程序ajax

步驟三③ 寫查詢及轉換方法數據庫

1 在接口裏面新增一個查詢方法（接口只定義規則，不作具體實現）json

2 繼承接口並實現查詢方法（由於功能須要，這裏查詢直接作了拼接，查詢出來就是「收件人-地址-聯繫方式」）api

3 方法裏面調用這個方法進行json數據轉換（通用方法能夠直接使用）ide

 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     };