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

步骤：

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

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

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

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

 

说明：

1、实现了通过上下键和Enter键选择列表项功能；

2、使用jQuery给文本框添加事件，尽量避免直接使用JavaScript，这样就不用考虑浏览器兼容问题了，因为jQuery已经做了。

3、经过测试，支持IE、火狐、谷歌浏览器，测试使用的三种浏览器均为当前较新的版本。

 

一、HTML代码和CSS代码：

<tr>

    <td class="tdTitle">

        <span style="color: Red;">*</span>学校名称:

    </td>

    <td>

        <div>

            <input id="sclName" type="text" name="edu_Grade.Scl.Name" class="tipInput" tip=""

                value="#{edu_Grade.Scl.Name}" autocomplete="off" />

            <span class="valid" msg="学校名称不能为空" mode="" rule="" ajaxaction="#{ajaxCheckUrl}">

            </span>

            <input id="hidSclName" type="hidden" name="edu_Grade.Scl" value="#{edu_Grade.Scl.Id}" />

            <!--模糊搜索结果显示div-->

            <div id="divSel" style="border: solid 1px #666; height: 95px; width: 200px; background-color: #fff;

                position: absolute; display: none; overflow: auto; z-index: 99999;">

            </div>

        </div>

    </td>

</tr>

View Code

<style type="text/css">

    .divItem:hover

    {

        cursor: pointer;

    }

    .divItem:nth-child(even)

    {

        background-color: #e9e9e9;

    }

    .tdTitle

    {

        width: 120px;

        text-align: right;

    }

    .itemHighlight

    {

        background-color: #6666aa !important;

        cursor: pointer;

    }

</style>

View Code

 

二、JavaScript代码：

<script type="text/javascript">

    _run(function () {

        $("#sclName").keyup(function (event) {

            searchSchool(event); //模糊搜索学校

        });

        $("#sclName").keydown(function (event) {

            searchKeyDown(this, event); //上下键和Enter键

        });

        $("body").click(function () {

            $("#divSel").css("display", "none"); //模糊搜索结果显示div

        });

    });



    //模糊搜索学校

    var lastKey = "";

    function searchSchool(evt) {

        var key = $.trim($("#sclName").val()); //取用户输入的关键字



        if (key == "" && evt.keyCode != 38 && evt.keyCode != 40 && evt.keyCode != 13) { //如果用户输入的关键字为空，则不搜索

            $("#divSel").css("display", "none");

            return;

        }



        if (key != lastKey && evt.keyCode != 38 && evt.keyCode != 40 && evt.keyCode != 13) {

            $.ajax({

                type: "GET",

                url: "#{searchSchoolUrl}",

                data: "key=" + escape(key), //传参

                success: function (data) {

                    if (data.length && data.length != 0) { //如果结果不为空

                        maxIndex = data.length - 1;

                        $("#divSel").css("display", "");



                        var html = "";

                        for (var i = 0; i < data.length; i++) {

                            html += "<div onclick='divItemClick(this)' itemId='" + data[i].Id + "' itemIndex='" + i + "' class='divItem' onmouseover='divItemMouseOver(this)' >" + 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");

        $("#sclName").blur();

    }



    //上下键和Enter键

    var itemIndex = -1;

    var maxIndex = -1;

    function searchKeyDown(obj, evt) {

        if (evt.keyCode != 38 && evt.keyCode != 40 && evt.keyCode != 13) {

            itemIndex = -1;

        }



        var key = $.trim($("#sclName").val()); //取用户输入的关键字

        lastKey = key;



        if (evt.keyCode == 40) { //下移



            if (itemIndex >= 0) {

                var preItem = $("#divSel").find("div:eq(" + itemIndex + ")");

                preItem.removeClass("itemHighlight");

            }

            if ($("#divSel").find("div:eq(" + (itemIndex + 1) + ")").length > 0) {

                itemIndex++;

            }

            else {

                itemIndex = 0;

            }

            var item = $("#divSel").find("div:eq(" + itemIndex + ")");

            item.addClass("itemHighlight");



            if ($("#divSel").scrollTop() < item.height() * (itemIndex - 4) || $("#divSel").scrollTop() > item.height() * (itemIndex + 4)) {

                $("#divSel").scrollTop(item.height() * (itemIndex - 4));

            }

        }



        if (evt.keyCode == 38) { //上移

            if (itemIndex >= 0) {

                var preItem = $("#divSel").find("div:eq(" + itemIndex + ")");

                preItem.removeClass("itemHighlight");

            }

            if (itemIndex > 0) {

                itemIndex--;

            }

            else {

                itemIndex = maxIndex;

            }

            var item = $("#divSel").find("div:eq(" + itemIndex + ")");

            item.addClass("itemHighlight");



            if ($("#divSel").scrollTop() > item.height() * itemIndex || $("#divSel").scrollTop() < item.height() * (itemIndex - 4)) {

                $("#divSel").scrollTop(item.height() * itemIndex);

            }

        }



        if (evt.keyCode == 13) { //Enter

            var item = $("#divSel").find("div:eq(" + itemIndex + ")");

            item.click();

            var key = $.trim($("#sclName").val()); //取用户输入的关键字

            lastKey = key;

            evt.returnValue = false;

        }

    }



    //鼠标移入

    function divItemMouseOver(obj) {

        var item = $("#divSel").find("div");

        item.removeClass("itemHighlight");

        itemIndex = parseInt($(obj).attr("itemIndex"));

        item = $(obj);

        item.addClass("itemHighlight");

        $("#sclName").focus();

    }

</script>

View Code

 

三、控制器代码：

/// <summary>

/// 查询学校

/// </summary>

public void SearchSchool()

{

    string key = (string)ctx.Get("key");



    List<Edu_School> sclList = edu_SchoolService.GetListByNameKey(key);//根据关键字查询学校集合

    if (sclList != null && sclList.Count > 0)

    {

        List<Dictionary<string, string>> dicList = new List<Dictionary<string, string>>();



        foreach (Edu_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);//搜索不到返回空

    }

}

View Code

 

效果图：