Automatische Vervollständigungsfunktion basierend auf jquery_jquery

Das Beispiel in diesem Artikel beschreibt die Methode der automatischen Vervollständigungsfunktion basierend auf JQuery. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

$(function() {
    // 自动补全
    var maxcount = 0;// 表示他最大的值
    var thisCount =0;// 初始化他框的位置
    $("body").prepend("

");
$("#sele").keyup(function(even) {
      var v = even.which;
If (v == 38 || v == 40 || v == 13)// Verhindern Sie, dass er Daten sendet, wenn Sie auf die Auf- und Ab-Tasten oder die OK-Taste
klicken                 {
             zurück;
            }
        var txt = $("#sele").val();//Hier wird der Wert seines Eingabefelds abgerufen
If (txt != "") {
//Daten zusammenstellen
               $.ajax({
​​​​​​​ URL: „Birthday_autoCompletion“, // JSON-Daten aus dem Hintergrund abrufen
              Typ: „Beitrag“,
                 dataType: „json“,
                    Daten: {"bir.userName": txt
                 },
Erfolg: Funktion(ls) {
                  var offset = $("#sele").offset();
$("#autoTxt").show();
$("#autoTxt").css("top", (offset.top 30) "px");
                        $("#autoTxt").css("left", offset.left "px");
                  var Candidate = "";
maxcount = 0;//Den Wert erneut abrufen
                             $.each(ls, function(k, v) {
Candidate = "

" v "

";
                                                                                                                                                                              });
$("#autoTxt").html(Kandidat);
                        $("#autoTxt li:eq(0)").css("background", "#A8A5A5");
//Objekt hervorheben
$('body').highLight();
                                     $('body').highLight($("#sele").val());
                    event.preventDefault();
//Reflektieren, wenn ein LI angeklickt wird
$("#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");});
                },
                Fehler: function() {
                    $("#autoTxt").html("");
                    $("#autoTxt").hide();
                    maxcount = 0;
                }
            });
        } sonst {
            $("#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;
                    sonst
                        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();
                    }sonst
                    {
                        if($("#sele").val()!="")
                        $("#sestart").click();
                    }
            } sonst {
                if($("#autoTxt").html()!="")
                    {
                        $("#sele").focus();
                        thisCount=0;
                    }
            }
    });
});

Sie haben die jQuery-Version mit jQuery erstellt.