Maison > Article > interface Web > jquery implémente le formulaire de recherche

jquery implémente le formulaire de recherche

PHPzoriginal: 2023-05-24 22:23:06652parcourir

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

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");

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

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>

总结

使用jQuery实现搜索表格的功能比较简单，只需要编写少量的代码即可实现。通过使用jQuery的方法find()、filter()和toggle()

find()

filter()

toggle()

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript jquery html Filter 事件

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jquery implémente le div flottantArticle suivant：jquery implémente le div flottant

Articles Liés

Voir plus