搜索框动态匹配——后端方式（每次输入后从后端获取数据）

本次要实现的是类似百度搜索框那种动态匹配搜索结果。功能是搜索机构名称，要搜索的是数据库中的机构表Org的机构名称字段。

说明一下，本次实现的搜索是根据汉字名称的首拼来查找，比如要查找“四川省”，则输入“sc”或"scs"则可，并且大小写都可以。原理是前端ajax将关键字传到后台，后台取出所有机构名称依次和关键字比较，匹配成功的组成一个集合传到前台展示。

首先，前端html。一个搜索文本框和一个动态显示匹配结果的<div>区域。

<input type="text" value="" placeholder="机构名称、编码" id="txtFind" style="180px;" oninput="Search(this.value)" autocomplete="off" />
<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;">   
</div>

二、js部分。js部分是一个<input>搜索框输入后触发的方法和三个控制动态匹配区域<div>的动作的方法，overFn()鼠标停在此条数据上当前数据就变色提示选中，clickFn()鼠标点击当前数据则把当前数据放到搜索文本框中并调用搜索方法。

        function Search(keydata) {
            var hz = (/[u4e00-u9fa5]/g).test(keydata); //判断是否为汉字的正则表达式
            if (keydata != "" && hz == false) {
                AjaxCall("/Org/Search", { find: keydata },function(data){
                    if(data.length>0){
                        var content = "";
                        for(var i = 0;i<data.length;i++){
                            content += "<div style='padding:5px;cursor:pointer' onclick='clickFn(this)' onmouseover='overFn(this)' onmouseout='outFn(this)'>" + data[i] + "</div>";
                        }
                        $("#findDiv").html(content);
                        $("#findDiv").css("display","block")
                    } 
                    if(data.length == 0){   //判断输入框是否为空，如果为空则隐藏提示区域
                        $("#findDiv").css("display", "none");
                    }
                });
            }
            if (keydata.length == 0) {   //判断输入框是否为空，如果为空则隐藏提示区域
                $("#findDiv").css("display", "none");
            }
        }

        function overFn(obj) {//鼠标在上面
            $(obj).css("background", "#F0F8FF");
        }
        function outFn(obj) {//鼠标离开
            $(obj).css("background", "white");
        }
        function clickFn(obj) {//鼠标点击
            $("#txtFind").val($(obj).html());
            $("#findDiv").css("display", "none");
            LoadData();
        }

三、后台控制器。

public object Search(string find)
        {
            return Json(OrgBll.Search(find));
        }

四、业务逻辑层。后台的思路是先将数据库中的机构表全部查找出来，再foreach循环把机构表的name字段调用获取拼音的方法（获取拼音的方法见另外文章）得到name数据的拼音版，再通过ToUpper()方法和ToLower()方法转大写和小写，再用Match()方法把前台输入的拼音和数据库的大小写拼音分别模糊匹配，只要其中有一个结果为true则为匹配成功，将此条机构名添加到事先定义好的List列表中。即用循环将所有的机构名都于输入作比较，将符合的及购买添加到List列表，最后返回List列表到前台。

/// <summary>
        /// 动态搜索框
        /// </summary>
        /// <param name="data"></param>
        /// <returns></returns>
        public static object Search(string find)
        {
            DBSession session = DBSession.TryGet();
            List<object> resultName = new List<object>();   //创建集合存放匹配成功的机构名

            List<Org> allOrg = session.GetList<Org>("", "");    //获取出所有机构
            foreach (var org in allOrg)
            {
                string pname = Pinyin.GetPinyin(org.Name); //获取名字首拼
                string pname2 = pname.ToUpper();    //大小写转化

                Regex rfind = new Regex(find);
                Match m = rfind.Match(pname);      //将机构名转成拼音与传过来的关键字作比较
                Match ms = rfind.Match(pname2);     //匹配大小写
                if (m.Success || ms.Success)
                {
                    resultName.Add(org.Name);   //将比较后匹配成功的机构名加到集合中，返回给前台
                }
            }
            session.Dispose();
            return resultName;
        }

注：Regex()Match()和所属命名空间是System.Text.RegularExpressions。

新知识：Regex r = new Regex(data);  将字符串转化成正则表达式格式

　　　　 Match m = r.Match(pinyin);  在指定字符串"pinyin"中搜索正则表达式格式的"data"的第一个匹配项。

　　　　如果匹配到了，返回值m的Success属性就是true，没匹配到的话Success属性就是false。 

　　　　字母大小转化：ToUpper()转大写，ToLower()转小写。