基於jquery實現的自動補全功能_jquery

本文實例講述了基於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($("#auTxt.                             $("#autoTxt").html("");
;                            $("#autoTxt").hide();
                        });
                        //行動物件
                        $("#autoTxt li").hover(function(){
                     為              會                             thisCount=this.id;},function(){
                                $("#autoTxt)                 },
                錯誤：函數（）{
                    $("#autoTxt").html("");
                    $("#autoTxt").hide();
                    最高計數 = 0;
                }
            });
        } 其他 {
            $("#autoTxt").hide();
            最大計數 = 0;
            $("#sestart").click();
        }
    });
    //按BODＹ時則隱藏搜尋值
    $("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;
                    其他
                        thisCount=0;
                $("#autoTxt li").css("背景", "#FFFFFF");
                $("#autoTxt li:eq(" thisCount ")").css("背景", "#A8A5A5");
                }else{$("#sele").focus();}
            } else if (v == 40) {// 按下按鍵時
                if(thisCount                 {
                    $("#sele").blur();
                    此數；
                    $("#autoTxt li").css("背景", "#FFFFFF");
                    $("#autoTxt li:eq(" thisCount ")").css("背景", "#A8A5A5")
;
;
;
;
;
;
;
;
;
;
;
;
;
;                 }
            } else if (v == 13) {//按確認鍵時
                var tt=$("#" thisCount).text();
                if(tt!="")
                    {
                        $("#sele").val(tt);
                        $("#autoTxt").html("");
                        $("#autoTxt").hide();
                    }其他
                    {

                        if($("#sele").val()!="")                         $("#sestart").click();

                    }

            } 其他 {                 if($("#autoTxt").html()!="")                     {                         $("#sele").focus();                         thisCount=0;                     }             }     }); }); 希望本文對大家介紹的 jQuery 程式設計有所幫助。