js、jquery实现列表模糊搜索功能过程解析

下面详细讲解一下如何使用 JavaScript 和 jQuery 实现列表模糊搜索功能。

1. 列表模糊搜索功能介绍

在实际开发中，经常有一些需要搜索或过滤数据的场景，如搜索商品、筛选文章等场景。列表模糊搜索功能就是针对这种场景，通过用户输入的关键字在列表中匹配，然后展示匹配的数据。

2. 实现列表模糊搜索功能的过程

2.1 创建表格和搜索框

首先，在 HTML 中创建表格和搜索框，示例如下：

<input type="text" id="search" placeholder="请输入关键字">

<table id="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Java编程思想</td>
      <td>79.00</td>
    </tr>
    <tr>
      <td>2</td>
      <td>JavaScript高级程序设计</td>
      <td>69.00</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Python从入门到精通</td>
      <td>59.00</td>
    </tr>
  </tbody>
</table>

2.2 编写 JavaScript 代码实现列表搜索

接下来，使用 JavaScript 和 jQuery 实现列表搜索功能，具体代码如下：

$(function() {
  $('#search').keyup(function() {
    var keyword = $(this).val(); // 获取搜索框中的关键字
    $('#table tbody tr').hide(); // 隐藏 table 中的所有行
    $('#table tbody tr').each(function() { // 循环遍历 tbody 中的行
      var text = $(this).text().toLowerCase(); // 获取当前行的文本并转换成小写
      if (text.indexOf(keyword.toLowerCase()) != -1) { // 判断是否包含关键字
        $(this).show(); // 如果包含关键字，则显示该行
      }
    });
  });
});

代码解释：

• $('#search').keyup() 监听用户输入框中的键盘按键。
• $(this).val() 获取搜索框中的关键字。
• $('#table tbody tr').hide() 隐藏 table 中的所有行。
• $('#table tbody tr').each() 循环遍历 table 中的行。
• $(this).text().toLowerCase() 获取当前行的文本，并将其转换成小写。
• text.indexOf(keyword.toLowerCase()) != -1 判断该行文本中是否包含关键字。
• $(this).show() 如果包含关键字，则显示该行。

2.3 示例说明

为了更好地理解列表搜索功能的实现过程，下面实现两个示例：

示例一：基本的列表搜索功能

在这个示例中，我们只需要简单地搜索表格中的名称列。可以在以下代码片段基础上进行扩展。

$(function() {
  $('#search').keyup(function() {
    var keyword = $(this).val();
    $('#table tbody tr').hide();
    $('#table tbody tr').each(function() {
      var text = $(this).text().toLowerCase();
      if (text.indexOf(keyword.toLowerCase()) != -1 && $(this).children('td:nth-child(2)').is(':visible')) {
        $(this).show();
      }
    });
  });
});

示例二：将搜索结果高亮显示

在这个示例中，我们将搜索结果在 table 中进行高亮显示。具体实现方式是使用一个 .highlight 的 CSS 类，然后在搜索到匹配的结果时将该行的文本进行替换并添加该类。

$(function() {
  $('#search').keyup(function() {
    var keyword = $(this).val();
    $('#table tbody tr').each(function() {
      var text = $(this).text().toLowerCase();
      if (text.indexOf(keyword.toLowerCase()) != -1 && $(this).children('td:nth-child(2)').is(':visible')) {
        $(this).html(function() {
          var newText = $(this).text().replace(new RegExp(keyword, "gi"), function(matched) {
            return '<span class="highlight">' + matched + '</span>';
          });
          return newText;
        }).addClass('highlight');
      } else {
        $(this).removeClass('highlight');
      }
    });
  });
});

需要注意的是，这种替换方式使用了正则表达式，可以高效地替换所有匹配项。而且在 DOM 中完成了操作，避免了重新渲染整个表格。同时，也可以很容易地使用 CSS 对 .highlight 类进行样式定制。

3. 小结

本文详细讲解了 JavaScript 和 jQuery 实现列表模糊搜索功能的过程，包括创建表格和搜索框、编写 JavaScript 代码实现列表搜索、示例说明等内容。希望对您有所帮助。