jQuery实现搜索框智能提示效果

1、新建Jscript文件Example.js，代码如下：

(function ($) {
    var timeid;
    var lastValue;
    var options;
    var c;
    var d;
    var t;
    var excoder;

    $.fn.autoComplete = function (config) {
        c = $(this);
        var defaults = {
             c.width() + 4, //提示框的宽度，默认跟文本框一样
            maxheight: 150, //提示框的最大高度
            top: 6,  //与文本框的上下距离
            url: "",   //ajax 请求地址
            type: "post", //ajax 请求类型
            async: false,  //是否异步请求
            autoLength: 0,  //文本长度大于0就请求服务器
            getValue: function (value) { }, //当回车或鼠标点击选中值的时候执行
            clearValue: function () { }, //当重新请求时清空Value值
            getText: function (text) { } //当回车或鼠标点击选中值的时候执行
        };
        options = $.extend(defaults, config);
        var p = c.position();
        d = $('<div id="autoComplete_Group"></div>');
        c.after(d);
        d.css({ "left": p.left, "top": p.top + c.height() + options.top, "width": options.width, "max-height": options.maxheight });
        t = $('<table cellspacing="0" cellpadding="2"></table>');
        d.append(t);
        d.append('<input style="display:none" />');
        c.bind("keydown", keydown_process);
        c.bind("keyup", keyup_process);
        c.bind("blur", blur_process);
        d.bind("focus", focus_div);
        d.bind("mouseout", mouseout_div);
    }

    function blur_process() {
        timeid = setTimeout(function () {
            d.hide();
        }, 200);
    }

    function mouseout_div() {
        t.find(".nowRow").removeClass("nowRow");
    }

    function focus_div() {
        clearTimeout(timeid);
        c.focus();
    }

    function keydown_process(e) {
        if (d.is(":hidden")) {
            return;
        }
        switch (e.keyCode) {
            case 38:
                e.preventDefault();
                var p = t.find(".nowRow").prev();
                if (p.length > 0) {
                    d.setScroll(options.maxheight, p);
                    p.mouseover();
                } else {
                    p = t.find("tr:last");
                    if (p.length > 0) {
                        d.setScroll(options.maxheight, p);
                        p.mouseover();
                    }
                }
                break;
            case 40:
                e.preventDefault();
                var n = t.find(".nowRow").next();
                if (n.length > 0) {
                    d.setScroll(options.maxheight, n);
                    n.mouseover();
                } else {
                    n = t.find("tr:first");
                    if (n.length > 0) {
                        d.setScroll(options.maxheight, n);
                        n.mouseover();
                    }
                }
                break;
            case 13:
                e.preventDefault();
                var n = t.find(".nowRow");
                if (n.length > 0) {
                    options.getValue(n.find("input:hidden").val());
                    c.val(n.text());
                    options.getText(c.val());
                    lastValue = "";
                    d.hide();
                }
                break;
        }
    }

    function keyup_process(e) {
        if (excoder == null) {
            excoder = e.keyCode;
        }
        else if (excoder == 38 || excoder == 40) {
            excoder = e.keyCode;
            return;
        }
        else {
            excoder = e.keyCode;
        }
        if (e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 37 || e.keyCode == 39) {
            return;
        }
        if (c.val().length > options.autoLength) {
            if (c.val() == lastValue) {
                return;  //判断是否跟上一次的值相等
            }
            lastValue = c.val();  //记录请求值
            options.clearValue(); //清空值
            getData(c, function (data) {
                if (data.length == 0) {
                    d.hide();
                    return;
                }
                t.find("tr").remove();
                $.each(data, function () {
                    t.append('<tr><td>' + this.text + '<input type="hidden" value="' + this.value + '" /></td></tr>');
                });
                var rows = t.find("tr");
                rows.mouseover(function () {
                    t.find(".nowRow").removeClass("nowRow");
                    $(this).addClass("nowRow");
                });
                rows.click(function () {
                    options.getValue($(this).find("input:hidden").val());
                    c.val($(this).text());
                    options.getText(c.val());
                    lastValue = "";
                    d.hide();
                });
                c.setPosition();
                d.show();
            });
        } else {
            lastValue = "";
            d.hide();
        }
    }

    function getData(o, process) {
        $.ajax({
            type: options.type,
            async: options.async, //控制同步
            url: options.url,
            data: o.attr("id") + "=" + o.val(),
            dataType: "json",
            cache: false,
            success: process,
            Error: function (err) {
                alert(err);
            }
        });
    }

    $.fn.resetEvent = function () {
        c.bind("keydown", keydown_process);
        c.bind("keyup", keyup_process);
        c.bind("blur", blur_process);
        d.bind("focus", focus_div);
        d.bind("mouseout", mouseout_div);
    }

    $.fn.setPosition = function () {
        var p = c.position();
        d.css({ "left": p.left, "top": p.top + c.height() + options.top });
    }

    $.fn.setScroll = function (h, o) {
        var offset = o.offset();
        if (offset.top > h) {
            $(this).scrollTop(offset.top - h);
        } else {
            if (offset.top < 25) {  //项的高度 对应样式表 td height:25px
                $(this).scrollTop(0);
            }
        }
    }
})(jQuery);

2、新建Web窗体Example.aspx，在页面body中加入以下代码：

<body>
    <form id="form1" runat="server">
    <div>
        请输入芜湖市公交站点名称：<input id="txt_station" type="text" />
    </div>
    </form>
</body>

在页面head中引用jquery及刚刚编写的Example.js，代码如下：

<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/Example.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
　　$(document).ready(function () {
　　　　$("#txt_station").autoComplete({ url: "Example1.aspx" });
　　});
</script>

在页面head中编写智能提示的div样式，代码如下：（可以单独写到样式表文件，然后引用）

<style type="text/css">
　　#autoComplete_Group
　　{
　　　　border: 1px solid #817F82;
　　　　position: absolute;
　　　　overflow-y: auto;
　　　　overflow-x: hidden;
　　　　display: none;
　　}
        
　　#autoComplete_Group table
　　{
　　　　background: none repeat scroll 0 0 #FFFFFF;
　　　　cursor: default;
　　　　width: 100%;
　　}
        
　　#autoComplete_Group td
　　{
　　　　color: #000000;
　　　　font: 14px/25px arial;
　　　　height: 25px;
　　　　padding: 0 8px;
　　}
        
　　#autoComplete_Group .nowRow
　　{
　　　　background-color: #EBEBEB;
　　}
</style>

3、新建Web窗体Example1.aspx，在后台Example1.aspx.cs中加入以下代码：

protected void Page_Load(object sender, EventArgs e)
{
　　string jsonArray = "";
　　string keyword = Request["txt_station"];
　　DataSet ds = GetList(keyword);
　　jsonArray = "[";
　　for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
　　{
　　　　jsonArray += "{"text":"" + ds.Tables[0].Rows[i][0].ToString() + "","value":"" + ds.Tables[0].Rows[i][0].ToString() + ""}" + ",";
　　}
　　jsonArray = jsonArray.TrimEnd(',');
　　jsonArray += "]";
　　Response.Write(jsonArray);
　　Response.End();
}

运行效果如下：