Heim > Artikel > Web-Frontend > jquery implementiert Suchformular

jquery implementiert Suchformular

PHPzOriginal: 2023-05-24 22:23:06610Durchsuche

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()

find()

filter()

toggle()

Das obige ist der detaillierte Inhalt vonjquery implementiert Suchformular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery html Filter 事件

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jquery implementiert div floatNächster Artikel：jquery implementiert div float

In Verbindung stehende Artikel

Mehr sehen