Detaillierte Erläuterung des Implementierungscodes der jQuery-Listenabruffunktion

Um eine einfache Liste zu implementieren, gibt es in der oberen rechten Ecke eine Listenabruffunktion. Ich hoffe, dass sie allen helfen kann.

Lassen Sie mich Ihnen zuerst die Renderings zeigen:

Dies ist eine einfache Liste oben rechts Ecke Eine Abruffunktion, die wir implementieren möchten, ist eine mit jquery implementierte Listenabruffunktion. Der spezifische Code lautet wie folgt:

$(function(){
      $("input[type=button]").click(function(){
        var txt=$("input[type=text]").val();
        if($.trim(txt)!=""){
          $(".ggsm_list li span").parent().hide().filter(":contains('"+txt+"')").show();
        }else{
          $(".ggsm_list li").show();
        }
      });
    });

Geben Sie der Schaltfläche zuerst ein Klickereignis Geben Sie den Eingabewert ein und blenden Sie dann die anderen übergeordneten Elemente von span aus (wobei tatsächlich andere li-Tags ausgeblendet werden), suchen Sie dann den li, der txt enthält (dh den Wert in der Eingabe), und zeigen Sie ihn dann an

$("#textInput").on("keypress", function (e) {
        if (e.charCode === 13) {
          var txt=$("input[type=text]").val();
          if($.trim(txt)!=""){
            $(".ggsm_list li span").parent().hide().filter(":contains('"+txt+"')").show();
          }else{
            $(".ggsm_list li").show();
          }
        }

Dieser Code ist eine Optimierung für die Eingabetaste auf der Tastatur (nicht viel Code und sehr einfach)

Verwandte Empfehlungen:

Basierend auf JavaScript, ähnlich der erweiterten Suchfunktion von Baidu Academic_Javascript-Kenntnisse

Detaillierte Erläuterung von PHP+SQLite-Datenbankoperationsbeispielen (Erstellen/Öffnen/Einfügen/Abrufen)

Ein Beispiel-Tutorial, das das Abrufen von JavaScript-Strings zusammenfasst

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Implementierungscodes der jQuery-Listenabruffunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!