本次要實現的是類似百度搜索框那種動態匹配搜尋結果。功能是搜尋機構名稱，要搜尋的是資料庫中的機構表Org的機構名稱欄位。

說明一下，本次實現的搜尋是根據漢字名稱的首拼來查詢，比如要查詢“四川省”，則輸入“sc”或"scs"則可。

首先，前端html。一個搜尋文字框和一個動態顯示匹配結果的<div>區域。

1 <input type="text" value="" placeholder="機構名稱" id="txtFind" style="width:180px;" oninput="Search(this.value)" autocomplete
 
="off"/>
2                     <div id="showDiv1" style="display:none; position:absolute;z-index:1000;top:50px;background:white; width:188px;font-size: 16px;color:black;border:1px solid #ccc;">
3                     </div>

二、js部分。js部分是一個<input>搜尋框輸入後觸發的方法和三個控制動態匹配區域<div>的動作的方法，overFn()滑鼠停在此條資料上當前資料就變色提示選中，clickFn()滑鼠點選當前資料則把當前資料放到搜尋文字框中並調用搜索方法。

 1         function overFn(obj) {//滑鼠在上面
 2             $(obj).css("background", "#F0F8FF");
 3         }
 4         function outFn(obj) {//滑鼠離開
 5             $(obj).css("background", "white");
 6         }
 7         function clickFn(obj) {//滑鼠點選
 8             $("#txtFind").val($(obj).html());
 9             $("#showDiv1").css("display", "none");
 
10             LoadData();
11         }
12 
13 
14         function Search(keydata) {
15             var hz = (/[\u4e00-\u9fa5]/g).test(keydata); //判斷是否為漢字的正則表示式
16             if (keydata != "" && hz == false ) {
17                 AjaxCall("/SysAdmin/Org/Search", { data: keydata }, function (data) {
18                     if (data.length > 0) {
19                         var content = "";
20                         for (var i = 0; i < data.length; i++) {
21                             content += "<div style='padding:5px;cursor:pointer' onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>" + data[i] + "</div>";
22                         }
23                         $("#showDiv1").html(content);
24                         $("#showDiv1").css("display", "block");
25                     }
26                     if (data.length == 0) {//判斷輸入框是否為空，如果為空則隱藏提示區域
27                         $("#showDiv1").css("display", "none");
28                     }
29                 });
30             }
31             if (keydata.length == 0) {//判斷輸入框是否為空，如果為空則隱藏提示區域
32                 $("#showDiv1").css("display", "none");
33             }
34             
35         }

三、後臺控制器。

1 public object Search(string data)
2         {
3             return Json(OrgBll.SearchOrg(data));
4         }

四、業務邏輯層。後臺的思路是先將資料庫中的機構表全部查找出來，再foreach迴圈把機構表的name欄位呼叫獲取拼音的方法（獲取拼音的方法見另外文章）得到name資料的拼音版，再用Match()方法把前臺輸入的拼音和資料庫的拼音模糊匹配，結果為true則為匹配成功，將此條機構名新增到事先定義好的List列表中。即用迴圈將所有的機構名都於輸入作比較，將符合的及購買新增到List列表，最後返回List列表到前臺。

 1 public static object SearchOrg(string data)
 2         {
 3             DBSession session = DBSession.TryGet();
 4             List<object> pname = new List<object>();    //定義列表存放符合查詢條件的機構名
 5 
 6             //string d = "%" + data + "%";
 7             //List<Org> org= session.GetListBySQL<Org>("select * from org where name like ?",d);
 8 
 9             List<Org> allOrg = session.GetList<Org>("", "");
10             
11             
12             foreach (var a in allOrg)
13             {
14                 string pinyin = Pinyin.GetPinyin(a.Name);
15                 Regex r = new Regex(data);
16                 Match m = r.Match(pinyin);
17                 if (m.Success)
18                 {
19                     pname.Add(a.Name);
20                 }
21             }
22             session.Dispose();
23             return pname;
24         }

注：Regex()Match()和所屬名稱空間是System.Text.RegularExpressions。