数据表姓氏搜索优化求助：匹配单词开头及多单词内容

核心修改说明 #

针对你的两个需求，我调整了搜索正则逻辑，并修复了斑马纹显示问题，以下是完整可运行的代码：

HTML 结构 #

<input type="text" id="lastNameSearch" placeholder="搜索姓氏...">
<table id="dataTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>邮箱</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Sontag</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Jane Robertson (nee Sontag)</td>
      <td>jane@example.com</td>
    </tr>
    <tr>
      <td>Mike Johnson</td>
      <td>mike@example.com</td>
    </tr>
    <tr>
      <td>Sarah Sonnenschein</td>
      <td>sarah@example.com</td>
    </tr>
    <tr>
      <td>David Thomson</td>
      <td>david@example.com</td>
    </tr>
  </tbody>
</table>

CSS 样式 #

#dataTable {
  width: 100%;
  border-collapse: collapse;
}
#dataTable th, #dataTable td {
  border: 1px solid #ddd;
  padding: 8px;
}
#dataTable th {
  background-color: #f2f2f2;
}
.zebra {
  background-color: #f9f9f9;
}

jQuery 核心代码 #

$(document).ready(function() {
  // 初始化斑马纹
  applyZebraStriping();

  // 监听搜索框输入事件
  $('#lastNameSearch').on('input', function() {
    const searchTerm = $.trim($(this).val());
    const $rows = $('#dataTable tbody tr');

    // 搜索词为空时显示所有行并重置斑马纹
    if (!searchTerm) {
      $rows.show();
      applyZebraStriping();
      return;
    }

    // 构造正则：匹配单元格内任意单词的开头，不区分大小写
    // (?:^|\s|\() 覆盖字符串开头、空格、左括号后的单词场景
    const regex = new RegExp(`(?:^|\\s|\\()${searchTerm}`, 'i');

    $rows.each(function() {
      // 假设姓氏在第一列，根据你的实际结构调整选择器
      const cellText = $(this).find('td:first').text();
      // 匹配则显示行，否则隐藏
      $(this).toggle(regex.test(cellText));
    });

    // 过滤后重新计算斑马纹
    applyZebraStriping();
  });

  // 统一处理斑马纹的函数
  function applyZebraStriping() {
    // 先移除所有行的斑马纹类，再给可见的偶数索引行添加（对应视觉上的奇数行）
    $('#dataTable tbody tr:visible')
      .removeClass('zebra')
      .filter(':even')
      .addClass('zebra');
  }
});

关键调整点 #

1. 单词开头匹配逻辑

   • 用正则(?:^|\s|\()${searchTerm}实现：
     • (?:^|\s|\()：匹配字符串开头、空格或左括号（覆盖"Robertson (nee Sontag)"这类带括号的场景）
     • 'i'修饰符：不区分大小写，搜索"son"和"SON"效果一致
   • 只要单元格内任意单词以搜索词开头，就会匹配成功

2. 斑马纹修复

   • 单独抽离applyZebraStriping函数，每次搜索后重新计算：
     • 先移除所有可见行的zebra类，避免残留样式
     • 用:visible筛选显示的行，再用:even（jQuery索引从0开始）给视觉上的奇数行添加斑马纹，解决DOM隐藏行干扰样式的问题

3. 避免功能失效的细节

   • 处理搜索词为空的边界情况，重置表格状态
   • 用toggle()替代手动show()/hide()，逻辑更简洁
   • 确保正则转义正确（比如\\s表示空格，因为jQuery字符串里需要转义反斜杠）

内容的提问来源于stack exchange，提问作者rbur