jQuery 插件 仿百度搜索框智能提示 调用简单!

因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个.

直接贴代码。

(function($) {    var timeid;    var lastValue;    var options;    var c;    var d;    var t;    $.fn.autoComplete = function(config) {        c = $(this);        var defaults = {            width: c.width(), //提示框的宽度 默认跟文本框一样            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(e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 13 || 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);

    #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;    }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title>jQuery 仿百度提示框</title>    <script src="/js/jquery.js" type="text/javascript"></script>    <link href="/js/autoComplete/autoComplete.css" rel="stylesheet" type="text/css" />    <script src="/js/autoComplete/jquery.autoComplete.js" type="text/javascript"></script>    <script type="text/javascript" language="javascript">        $(document).ready(function(){            $("#txt_company").autoComplete({ url:"ajax.aspx" });        });    </script></head><body>    <form id="form1" runat="server">        <input id="txt_company" type="text" style="width:468px;" />    </form></body></html>

    protected void Page_Load(object sender, EventArgs e)    {        string keyword = Request["txt_company"];        string jsonArray = "[{\"text\":\"天天有限公司\",\"value\":\"2\"},{\"text\":\"明明有限公司\",\"value\":\"4\"},{\"text\":\"黄黄有限公司\",\"value\":\"4\"}]";        Response.Write(jsonArray);        Response.End();    }

后台只需要返回json格式的 text 和 value值 就可以了。

$.fn.resetEvent();  这个方法是重新绑定事件, 比如从一个容器 append到另一个容器 事件丢失了, append完可以使用该方法重新绑定事件。下面还有一些参数。

        var defaults = {            width: c.width(), //提示框的宽度 默认跟文本框一样            maxheight: 150, //提示框的最大高度            top: 6,  //与文本框的上下距离            url: "",   //ajax 请求地址            type: "post", //ajax 请求类型            async: false,  //是否异步请求            autoLength: 0,  //文本长度大于0 就请求服务器            getValue: function(value){ }, //当回车 或 鼠标点击选中值的时候执行            clearValue: function(){ }, //当重新请求时清空Value值            getText: function(text){ } //当回车 或 鼠标点击选中值的时候执行        };

好了。  唯一一个缺点就是 鼠标点击项的时候 不松开会隐藏掉下拉框,具体看我代码,有能力的可以改下~