基于jquery實現(xiàn)的自動補全功能

更新時間：2015年03月12日 09:53:35 作者：th小米粥

這篇文章主要介紹了基于jquery實現(xiàn)的自動補全功能的方法,涉及jQuery操作數(shù)據(jù)實現(xiàn)補全的技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了基于jquery實現(xiàn)的自動補全功能的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

$(function() {

    // 自動補全

    var maxcount = 0;// 表示他最大的值

    var thisCount =0;// 初始化他框的位置

    $("body").prepend("<div style='width:120px; display:none; background:#FFFFFF; position: absolute;' id='autoTxt'></div>");

    $("#sele").keyup(function(even) {

        var v = even.which;

        if (v == 38 || v == 40 || v == 13)// 當(dāng)點擊上下鍵或者確定鍵時阻止他傳送數(shù)據(jù)

            {

            return;

            }

        var txt = $("#sele").val();//這里是取得他的輸入框的值

        if (txt != "") {

            //拼裝數(shù)據(jù)

            $.ajax({

                url : "Birthday_autoCompletion",//從后臺取得json數(shù)據(jù)

                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 += "<li id='" +maxcount+ "'>" + v + "</li>";

                        maxcount++;

                    });

                    $("#autoTxt").html(Candidate);

                    $("#autoTxt li:eq(0)").css("background", "#A8A5A5");

                    //高亮對象

                    $('body').highLight();

                    $('body').highLight($("#sele").val());

                    event.preventDefault();

                        //當(dāng)單擊某個ＬＩ時反映

                        $("#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();

        }

    });

    //當(dāng)單擊ＢＯＤＹ時則隱藏搜索值

    $("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<maxcount-1)

                {

                    $("#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;

                    }

            }

    });

});