開篇語
因為項目中需要用到一個自動補全的功能，功能描述：
需求一：新增收件人的時候，自動下拉顯示出數據庫中所有的收件人信息（顯示的信息包括：姓名-收件地址-聯系方式）
需求二：選中一個值得時候，分別賦值到對應文本框（收件人輸入框中賦值 姓名，聯系方式輸入框中賦值 手機號，收件地址輸入框中賦值 地址）
解決需求一（因本人比較懶，所以直接選用了一個比較方便的插件：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>
解決需求二：特意查了下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 }
效果展示：
選中前
選中后
天了嚕，什么，竟然收件人賦值不上，找了半天原因（清空后賦值等等）。。。。。
還是沒找到問題，不過因為項目急着測試，就想了個偷懶的辦法，用延時再賦值的方式調了下，終於可以了
所以最終版的前台請求如下
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 };
最終效果
至此，自動補全已經完成並滿足需求，Autocomplete非常靈活，本文只是做了簡單闡述和講解
對Autocomplete插件更多參數和方法說明，請查閱 http://www.runoob.com/jqueryui/api-autocomplete.html