给文本框添加模糊搜索功能（“我记录”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;  200px; background-color: #fff;
                position: absolute; display: none; overflow: auto; z-index: 99999;">
            </div>
        </div>
    </td>
</tr>

<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>

二、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>

三、控制器代码：

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

效果图：