jquery implémente le formulaire de recherche-Questions et réponses frontales-php.cn

jquery implémente le formulaire de recherche

PHPz

Libérer： 2023-05-24 22:23:06

original

701 Les gens l'ont consulté

jQuery implémente un formulaire de recherche

Dans les applications Web, les tableaux sont une forme courante d'affichage de données. Lorsque la quantité de données est importante, il est souvent nécessaire d’ajouter une fonction de recherche pour localiser rapidement les données recherchées. Cet article explique comment utiliser jQuery pour implémenter la fonction de formulaire de recherche.

Code HTML

Tout d'abord, nous devons préparer du code HTML, comprenant un formulaire et une zone de saisie. Notre formulaire contient des informations telles que le nom, l'âge, le sexe et la nationalité.

<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="搜索">

Copier après la connexion

Code JavaScript

Ensuite, nous devons écrire du code JavaScript. Nous utiliserons la bibliothèque jQuery pour simplifier le processus de codage. Tout d’abord, nous devons obtenir les éléments de la zone de saisie et du tableau.

var input = $("#myInput");
var table = $("#myTable");

Copier après la connexion

Ensuite, nous devons ajouter un écouteur d'événement pour déclencher la fonction de recherche lors de la saisie dans la zone de saisie.

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方法根据匹配结果显示或隐藏行
  });
});

Copier après la connexion

Dans ce code, nous utilisons la méthode jQuery on() pour ajouter un écouteur d'événement. Lorsque la zone de saisie déclenche l'événement keyup, le code obtiendra la valeur de la zone de saisie et la convertira en lettres minuscules. Nous utilisons ensuite les méthodes find() et filter() de jQuery pour rechercher le contenu correspondant, et utilisons la méthode toggle() pour afficher ou masquer D'ACCORD. Dans cet exemple, nous utilisons la méthode indexOf() pour vérifier si le texte contient le terme recherché. 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>

Copier après la connexion