Detaillierte Erläuterung der jQuery-Implementierung der Suchfunktion mit Tastatureingabe

In diesem Artikel wird hauptsächlich die Implementierung der Suchfunktion über die Tastatur vorgestellt. Der Front-End-Code und der Implementierungscode für die Suchschaltfläche werden für alle veröffentlicht, die ihn benötigen.

Ursprünglich dachte ich immer, dass eine Suche nicht allzu schwierig sei. Erst als ich das letzte Projekt erhielt, das es mir ermöglichte, ohne Schaltflächen zu suchen, begann ich, danach zu suchen Daher stelle ich ohne weiteres meinen Quellcode als Referenz zur Verfügung.

Front-End-Code

<p class="fl search-box"> 
     <button type="button" name="btnSubmit" id="btnSubmit" class="btnSubmit">搜索</button>
     <input id="sousuo" name="sousuo" type="search" placeholder="输入搜索内容" value="">
</p>

Implementierung der Suchschaltfläche

$(function () {
   $("body").on("click", "#btnSubmit", function () {
    var sousuo = $("#sousuo").val();
    if (sousuo == "") { alert("请输入信息"); return false; }
    location.href = "{$:CSSiteUrl}search.html?keywords=" + escape(sousuo);
   });
  });

Das Folgende ist der Höhepunkt dieses Mals. Drücken Sie die Eingabetaste auf der Tastatur, um die Suche durchzuführen

$('#sousuo').bind('keypress', function (event) { 
   if (event.keyCode == "13") { 
    $("#btnSubmit").click();
   }
  })

Vielleicht können Sie finden dass es tatsächlich einer Rückgabe gleichkommt. Der Autoschlüssel event.keyCode == “13” ist der 13. Tastencode der Tastatur. Wenn Sie in Zukunft weitere Tasten implementieren möchten, müssen Sie mit dieser Hilfe nur den entsprechenden Tastencode der Tastatur abfragen.

Zusammenfassung

Verwandte Empfehlungen:

Beispielanalyse von Eingabe, Senden, Schaltfläche und Beförderung return Unterschiede in den Schlüsselübermittlungsdaten

Vergleichen Sie den Unterschied zwischen Wagenrücklauf und Zeilenvorschub

jquery Es gibt zwei Tastendrücke in derselben Datei, zwei beim Drücken der Eingabetaste Alles ausgelöst

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