搜索框动态匹配——后端方式（每次输入后从后端获取数据）
本次要实现的是类似百度搜索框那种动态匹配搜索结果。功能是搜索机构名称，要搜索的是数据库中的机构表Org的机构名称字段。
说明一下，本次实现的搜索是根据汉字名称的首拼来查找，比如要查找“四川省”，则输入“sc”或"scs"则可，并且大小写都可以。原理是前端ajax将关键字传到后台，后台取出所有机构名称依次和关键字比较，匹配成功的组成一个集合传到前台展示。
首先，前端html。一个搜索文本框和一个动态显示匹配结果的<div>区域。
1 <input type="text" value="" placeholder="机构名称、编码" id="txtFind" style="180px;" oninput="Search(this.value)" autocomplete="off" /> 2 <div id="findDiv" style="display:none; position:absolute;z-index:1000;top:45px;background:white; 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()转小写。