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:
Vergleichen Sie den Unterschied zwischen Wagenrücklauf und Zeilenvorschub
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!
