Heim > Artikel > Web-Frontend > jquery implementiert Suchformular
jquery implementiert Suchformular
- PHPzOriginal
- 2023-05-24 22:23:06672Durchsuche
jQuery implementiert Suchformular
In Webanwendungen sind Tabellen eine gängige Form der Datenanzeige. Bei großen Datenmengen ist es häufig erforderlich, eine Suchfunktion hinzuzufügen, um die benötigten Daten schnell zu finden. In diesem Artikel wird erläutert, wie Sie mit jQuery die Suchformularfunktion implementieren.
- HTML-Code
Zuerst müssen wir etwas HTML-Code vorbereiten, einschließlich eines Formulars und eines Eingabefelds. Unser Formular enthält Informationen wie Name, Alter, Geschlecht und Nationalität.
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>国籍</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
<td>中国</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
<td>中国</td>
</tr>
<tr>
<td>John Doe</td>
<td>40</td>
<td>男</td>
<td>美国</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>35</td>
<td>女</td>
<td>美国</td>
</tr>
</tbody>
</table>
<input type="text" id="myInput" placeholder="搜索">- JavaScript-Code
Als nächstes müssen wir etwas JavaScript-Code schreiben. Wir werden die jQuery-Bibliothek verwenden, um den Codierungsprozess zu vereinfachen. Zuerst müssen wir das Eingabefeld und die Tabellenelemente abrufen.
var input = $("#myInput");
var table = $("#myTable");Dann müssen wir einen Ereignis-Listener hinzufügen, um die Suchfunktion auszulösen, wenn wir etwas in das Eingabefeld eingeben.
input.on("keyup", function() {
var value = $(this).val().toLowerCase(); // 获取输入框的值，并将其转换为小写字母
table.find("tr").not(":first").filter(function() { // 找到表格中所有行（除第一行标题外）并过滤出与输入框中内容不匹配的行
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) // toggle方法根据匹配结果显示或隐藏行
});
});In diesem Code verwenden wir die jQuery-Methode on(), um einen Ereignis-Listener hinzuzufügen. Wenn das Eingabefeld das Ereignis keyup auslöst, ruft der Code den Wert des Eingabefelds ab und wandelt ihn in Kleinbuchstaben um. Anschließend verwenden wir die jQuery-Methoden find() und filter(), um nach passenden Inhalten zu suchen, und verwenden die Methode toggle() zum Ein- oder Ausblenden OK. In diesem Beispiel verwenden wir die Methode indexOf(), um zu prüfen, ob der Text den Suchbegriff enthält. on()来添加事件监听器。当输入框触发keyup事件时，代码将获取输入框的值并将其转换为小写字母。然后，我们使用jQuery的方法find()和filter()来搜索匹配的内容，并使用toggle()方法显示或隐藏行。在这个例子中，我们使用了indexOf()方法来检查文本是否包含搜索词。
- 完整代码
下面是完整的HTML和JavaScript代码：
<!DOCTYPE html>
<html>
<head>
<title>jQuery实现搜索表格</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="myInput" placeholder="搜索">
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>国籍</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
<td>中国</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
<td>中国</td>
</tr>
<tr>
<td>John Doe</td>
<td>40</td>
<td>男</td>
<td>美国</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>35</td>
<td>女</td>
<td>美国</td>
</tr>
</tbody>
</table>
<script>
var input = $("#myInput");
var table = $("#myTable");
input.on("keyup", function() {
var value = $(this).val().toLowerCase();
table.find("tr").not(":first").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
</script>
</body>
</html>- 总结
使用jQuery实现搜索表格的功能比较简单，只需要编写少量的代码即可实现。通过使用jQuery的方法find()、filter()和toggle()
- Vollständiger Code🎜🎜🎜Das Folgende ist der vollständige HTML- und JavaScript-Code: 🎜rrreee
- 🎜Zusammenfassung🎜🎜🎜Die Verwendung von jQuery zur Implementierung der Suchformularfunktion ist relativ Einfach, einfach. Für die Implementierung ist das Schreiben einer kleinen Menge Code erforderlich. Mithilfe der jQuery-Methoden
find(), filter() und toggle() können wir problemlos nach passenden Inhalten suchen und diese anzeigen oder ausblenden . 🎜Das obige ist der detaillierte Inhalt vonjquery implementiert Suchformular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!