给文本框添加模糊搜索功能（“我记录”MVC框架下实现）

浏览数：31 / 时间：2015年06月09日

步骤：

1、在文本框中输入内容时，触发keyup事件；

2、在keyup事件的处理方法中，通过Ajax调用控制器的方法；

3、在控制器方法中，搜索满足条件的数据，这里分页获取数据，且只取第一页的数据，返回Json数据；

4、JavaScript处理返回的数据，拼HTML，生成列表框，并为列表框添加鼠标点击事件。

一、HTML代码和CSS代码：

            <tr>
                <td class="tdTitle">
                    学校名称:
                </td>
                <td>
                    <div>
                        <input id="sclName" type="text" name="sys_Grade.Scl.Name" class="tipInput" tip="请输入学校名称"
                            value="#{sys_Grade.Scl.Name}" onkeyup="searchSchool()" />
                        <span class="valid" msg="学校名称不能为空" mode="" rule="" ajaxaction="#{ajaxCheckUrl}">
                        </span>
                        <input id="hidSclName" type="hidden" name="sys_Grade.Scl" value="#{sys_Grade.Scl.Id}" />
                        <!--模糊搜索结果显示div-->
                        <div id="divSel" style="border: solid 1px #666; height: 95px; width: 200px; background-color: #fff;
                            position: absolute; display: none; overflow: hidden; z-index: 99999;">
                        </div>
                    </div>
                </td>
            </tr>

View Code

    .divItem:hover
    {
        background-color: #dddddd;
        cursor: pointer;
    }

View Code

二、JavaScript代码：

<script type="text/javascript">
    //模糊搜索学校
    function searchSchool() {
        var key = $("#sclName").val(); //取用户输入的关键字

        if ($.trim(key) == "") { //如果用户输入的关键字为空，则不搜索
            $("#divSel").css("display", "none");
            return;
        }

        $.ajax({
            type: "GET",
            url: "/School/Sys_Grade/SearchSchool",
            data: "key=" + escape(key), //传参
            success: function (data) {
                if (data.length != 0) { //如果结果不为空
                    $("#divSel").css("display", "");

                    var html = "";
                    for (var i = 0; i < data.length; i++) {
                        html += "<div onclick=‘divItemClick(this)‘ itemId=‘" + data[i].Id + "‘ class=‘divItem‘>" + data[i].Name + "</div>";
                    }

                    $("#divSel").html(html);
                    $("#sclName").css("border", "solid 1px #000");
                }
                else { //搜索不到结果
                    $("#sclName").css("border", "dashed 1px red");
                    $("#divSel").css("display", "none");
                    $("#hidSclName").val("");
                }

                if (data.length = 1) { //搜索结果有且只有一个
                    $("#hidSclName").val(data[0].Id);
                }
            }
        });
    }

    //模糊搜索结果选项点击事件
    function divItemClick(obj) {
        $("#sclName").val($(obj).text());
        $("#sclName").css("color", "#000");
        $("#hidSclName").val($(obj).attr("itemId"));
        $("#sclName").focus();
        $("#divSel").css("display", "none");
    }
</script>

View Code

三、控制器代码：

        /// <summary>
        /// 查询学校
        /// </summary>
        public void SearchSchool()
        {
            string key = (string)ctx.Get("key");

            try
            {
                List<Sys_School> sclList = Sys_SchoolService.GetListQueryName(key);//根据关键字查询学校集合
                if (sclList != null && sclList.Count > 0)
                {
                    List<Dictionary<string, string>> dicList = new List<Dictionary<string, string>>();

                    foreach (Sys_School scl in sclList)
                    {
                        Dictionary<string, string> dic = new Dictionary<string, string>();
                        dic.Add("Id", scl.Id.ToString());
                        dic.Add("Name", scl.Name);
                        dicList.Add(dic);
                    }

                    echoJson(dicList);
                }
                else
                {
                    echoText(null);//搜索不到返回空
                }
            }
            catch
            {
                echoText(null);//出错返回空，表示不做任何处理
            }
        }

View Code

四、Service层代码：

    /// <summary>
    /// 学校管理
    /// </summary>
    public class Sys_SchoolService
    {
        /// <summary>
        /// 根据学校名称关键字查询学校集合
        /// </summary>
        /// <param name="key">学校名称关键字</param>
        public static List<Sys_School> GetListQueryName(string key)
        {
            return Sys_School.findPage("Name like ‘%" + key + "%‘ order by Name", 5).Results;
        }
    }