jquery implements search form-Front-end Q&A-php.cn

jquery implements search form

PHPz

Release： 2023-05-24 22:23:06

Original

703 people have browsed it

jQuery implements search form

In web applications, tables are a common form of data display. When the amount of data is large, it is often necessary to add a search function to quickly locate the required data. This article will introduce how to use jQuery to implement the search form function.

HTML code

First, we need to prepare some HTML code, including a form and an input box. Our form contains information such as name, age, gender and nationality.

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

Copy after login

JavaScript Code

Next, we need to write some JavaScript code. We will use the jQuery library to simplify the coding process. First, we need to get the input box and table elements.

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

Copy after login

Then, we need to add an event listener to trigger the search function when typing in the input box.

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

Copy after login

In this code, we use the jQuery method on() to add an event listener. When the input box fires the keyup event, the code will get the value of the input box and convert it to lowercase letters. We then use jQuery's methods find() and filter() to search for matching content, and the toggle() method to show or hide rows. In this example, we used the indexOf() method to check if the text contains the search term.

Full code

The following is the complete HTML and JavaScript code:

<!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>

Copy after login

Summary

Usage jQuery is relatively simple to implement the function of searching the table, and only needs to write a small amount of code to achieve it. By using jQuery's methods find(), filter(), and toggle(), we can easily search for matching content and show or hide rows.

The above is the detailed content of jquery implements search form. For more information, please follow other related articles on the PHP Chinese website!