本文实例讲述了基于jquery实现的自动补全功能的方法。分享给大家供大家参考。具体实现方法如下：
复制代码 代码如下:
$(function() {
    // 自动补全
    var maxcount = 0;// 表示他最大的值
    var thiscount =0;// 初始化他框的位置
    $(body).prepend(
);
    $(#sele).keyup(function(even) {
        var v = even.which;
        if (v == 38 || v == 40 || v == 13)// 当点击上下键或者确定键时阻止他传送数据
            {
            return;
            }
        var txt = $(#sele).val();//这里是取得他的输入框的值
        if (txt != ) {
            //拼装数据
            $.ajax({
                url : birthday_autocompletion,//从后台取得json数据
                type : post,
                datatype : json,
                data : {bir.username : txt
                },
                success : function(ls) {
                    var offset = $(#sele).offset();
                    $(#autotxt).show();
                    $(#autotxt).css(top, (offset.top + 30) + px);
                    $(#autotxt).css(left, offset.left + px);
                    var candidate = ;
                     maxcount = 0;//再重新得值
                    $.each(ls, function(k, v) {
                        candidate += + v + ;
                        maxcount++;
                    });
                    $(#autotxt).html(candidate);
                    $(#autotxt li:eq(0)).css(background, #a8a5a5);
                    //高亮对象
                    $('body').highlight();
                    $('body').highlight($(#sele).val());
                    event.preventdefault();
                        //当单击某个ｌｉ时反映
                        $(#autotxt li).click(function(){
                            $(#sele).val($(#autotxt li:eq(+this.id+)).text());
                            $(#autotxt).html();
                            $(#autotxt).hide();
                        });
                        //移动对象
                        $(#autotxt li).hover(function(){
                            $(#autotxt li).css(background, #ffffff);
                            $(#autotxt li:eq(+this.id+)).css(background, #a8a5a5);
                            thiscount=this.id;},function(){
                                $(#autotxt li).css(background, #ffffff);});
                },
                error : function() {
                    $(#autotxt).html();
                    $(#autotxt).hide();
                    maxcount = 0;
                }
            });
        } else {
            $(#autotxt).hide();
            maxcount = 0;
            $(#sestart).click();
        }
    });
    //当单击ｂｏｄｙ时则隐藏搜索值
    $(body).click(function(){
        $(#autotxt).html();
        $(#autotxt).hide();
        thiscount=0;
    });
    // 写移动事件//上键３８ 下键４０ 确定键 １３
    $(body).keyup(function(even) {
        var v = even.which;
            if (v == 38)// 按上键时
            {
                if(thiscount!=0){//等于零时则证明不能上了。所以获得焦点
                    $(#sele).blur();
                    if(thiscount>0)
                        --thiscount;
                    else
                        thiscount=0;
                $(#autotxt li).css(background, #ffffff);
                $(#autotxt li:eq(+thiscount+)).css(background, #a8a5a5);
                }else{$(#sele).focus();}
            } else if (v == 40) {// 按下键时
                if(thiscount                {
                    $(#sele).blur();
                    ++thiscount;
                    $(#autotxt li).css(background, #ffffff);
                    $(#autotxt li:eq(+thiscount+)).css(background, #a8a5a5);
                }
            } else if (v == 13) {// 按确认键时
                var tt=$(#+thiscount).text();
                if(tt!=)
                    {
                        $(#sele).val(tt);
                        $(#autotxt).html();
                        $(#autotxt).hide();
                    }else
                    {
                        if($(#sele).val()!=)
                        $(#sestart).click();
                    }
            } else {
                if($(#autotxt).html()!=)
                    {
                        $(#sele).focus();
                        thiscount=0;
                    }
            }
    });
});
希望本文所述对大家的jquery程序设计有所帮助。