本次要實現的是類似百度搜索框那種動態匹配搜索結果。功能是搜索機構名稱，要搜索的是數據庫中的機構表Org的機構名稱字段。
說明一下，本次實現的搜索是根據漢字名稱的首拼來查找，比如要查找“四川省”，則輸入“sc”或"scs"則可，並且大小寫都可以。原理是前端ajax將關鍵字傳到后台，后台取出所有機構名稱依次和關鍵字比較，匹配成功的組成一個集合傳到前台展示。
首先，前端html。一個搜索文本框和一個動態顯示匹配結果的<div>區域。
1 <input type="text" value="" placeholder="機構名稱、編碼" id="txtFind" style="width:180px;" oninput="Search(this.value)" autocomplete="off" /> 2 <div id="findDiv" style="display:none; position:absolute;z-index:1000;top:45px;background:white; width:180px;font-size: 16px;color:black;border:1px solid #ccc;"> 3 </div>
二、js部分。js部分是一個<input>搜索框輸入后觸發的方法和三個控制動態匹配區域<div>的動作的方法，overFn()鼠標停在此條數據上當前數據就變色提示選中，clickFn()鼠標點擊當前數據則把當前數據放到搜索文本框中並調用搜索方法。
1 function Search(keydata) { 2 var hz = (/[\u4e00-\u9fa5]/g).test(keydata); //判斷是否為漢字的正則表達式 3 if (keydata != "" && hz == false) { 4 AjaxCall("/Org/Search", { find: keydata },function(data){ 5 if(data.length>0){ 6 var content = ""; 7 for(var i = 0;i<data.length;i++){ 8 content += "<div style='padding:5px;cursor:pointer' onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>" + data[i] + "</div>"; 9 } 10 $("#findDiv").html(content); 11 $("#findDiv").css("display","block") 12 } 13 if(data.length == 0){ //判斷輸入框是否為空，如果為空則隱藏提示區域 14 $("#findDiv").css("display", "none"); 15 } 16 }); 17 } 18 if (keydata.length == 0) { //判斷輸入框是否為空，如果為空則隱藏提示區域 19 $("#findDiv").css("display", "none"); 20 } 21 } 22 23 function overFn(obj) {//鼠標在上面 24 $(obj).css("background", "#F0F8FF"); 25 } 26 function outFn(obj) {//鼠標離開 27 $(obj).css("background", "white"); 28 } 29 function clickFn(obj) {//鼠標點擊 30 $("#txtFind").val($(obj).html()); 31 $("#findDiv").css("display", "none"); 32 LoadData(); 33 }
三、后台控制器。
1 public object Search(string find) 2 { 3 return Json(OrgBll.Search(find)); 4 }
四、業務邏輯層。后台的思路是先將數據庫中的機構表全部查找出來，再foreach循環把機構表的name字段調用獲取拼音的方法（獲取拼音的方法見另外文章）得到name數據的拼音版，再通過ToUpper()方法和ToLower()方法轉大寫和小寫，再用Match()方法把前台輸入的拼音和數據庫的大小寫拼音分別模糊匹配，只要其中有一個結果為true則為匹配成功，將此條機構名添加到事先定義好的List列表中。即用循環將所有的機構名都於輸入作比較，將符合的及購買添加到List列表，最后返回List列表到前台。
1 /// <summary> 2 /// 動態搜索框 3 /// </summary> 4 /// <param name="data"></param> 5 /// <returns></returns> 6 public static object Search(string find) 7 { 8 DBSession session = DBSession.TryGet(); 9 List<object> resultName = new List<object>(); //創建集合存放匹配成功的機構名 10 11 List<Org> allOrg = session.GetList<Org>("", ""); //獲取出所有機構 12 foreach (var org in allOrg) 13 { 14 string pname = Pinyin.GetPinyin(org.Name); //獲取名字首拼 15 string pname2 = pname.ToUpper(); //大小寫轉化 16 17 Regex rfind = new Regex(find); 18 Match m = rfind.Match(pname); //將機構名轉成拼音與傳過來的關鍵字作比較 19 Match ms = rfind.Match(pname2); //匹配大小寫 20 if (m.Success || ms.Success) 21 { 22 resultName.Add(org.Name); //將比較后匹配成功的機構名加到集合中，返回給前台 23 } 24 } 25 session.Dispose(); 26 return resultName; 27 }
注：Regex()Match()和所屬命名空間是System.Text.RegularExpressions。
新知識：Regex r = new Regex(data); 將字符串轉化成正則表達式格式
Match m = r.Match(pinyin); 在指定字符串"pinyin"中搜索正則表達式格式的"data"的第一個匹配項。
如果匹配到了，返回值m的Success屬性就是true，沒匹配到的話Success屬性就是false。
字母大小轉化：ToUpper()轉大寫，ToLower()轉小寫。