HTML表格如何实现数据的模糊搜索？有哪些方法？

<input type="text" id="searchInput" onkeyup="searchTable()">
<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>城市</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>北京</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>上海</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>广州</td>
      <td>产品经理</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>北京</td>
      <td>销售</td>
    </tr>
  </tbody>
</table>

<script>
function searchTable() {
  let input, filter, table, tr, td, i, j, txtValue;
  input = document.getElementById("searchInput");
  filter = input.value.toUpperCase(); // 转换为大写，方便不区分大小写搜索
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // 遍历所有表格行，从索引1开始跳过表头
  for (i = 1; i < tr.length; i++) {
    let rowVisible = false; // 标记当前行是否应该显示
    // 遍历当前行的所有单元格
    td = tr[i].getElementsByTagName("td");
    for (j = 0; j < td.length; j++) {
      if (td[j]) {
        txtValue = td[j].textContent || td[j].innerText; // 获取单元格文本
        if (txtValue.toUpperCase().indexOf(filter) > -1) { // 判断是否包含搜索词
          rowVisible = true;
          break; // 找到一个匹配就够了，跳出单元格循环
        }
      }
    }
    if (rowVisible) {
      tr[i].style.display = ""; // 显示行
    } else {
      tr[i].style.display = "none"; // 隐藏行
    }
  }
}
</script>

let searchTimeout;
function searchTableOptimized() {
  clearTimeout(searchTimeout); // 清除之前的延迟
  searchTimeout = setTimeout(() => {
    // 这里放上面 searchTable() 函数里的所有逻辑
    let input, filter, table, tr, td, i, j, txtValue;
    input = document.getElementById("searchInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");

    for (i = 1; i < tr.length; i++) {
      let rowVisible = false;
      td = tr[i].getElementsByTagName("td");
      for (j = 0; j < td.length; j++) {
        if (td[j]) {
          txtValue = td[j].textContent || td[j].innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            rowVisible = true;
            break;
          }
        }
      }
      tr[i].style.display = rowVisible ? "" : "none";
    }
  }, 300); // 延迟300毫秒执行
}
// 将 onkeyup="searchTable()" 改为 onkeyup="searchTableOptimized()"

// 以Fuse.js为例 (需要引入Fuse.js库)
// npm install fuse.js 或者通过CDN引入
/* <script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.min.js"></script> */

// 假设我们有一个数据数组，而不是直接从DOM读取
const tableData = [
  { name: '张三', city: '北京', occupation: '工程师' },
  { name: '李四', city: '上海', occupation: '设计师' },
  { name: '王五', city: '广州', occupation: '产品经理' },
  { name: '赵六', city: '北京', occupation: '销售' },
];

// Fuse.js 配置
const options = {
  keys: ['name', 'city', 'occupation'], // 告诉Fuse在哪些字段里搜索
  includeScore: true, // 是否包含匹配分数
  threshold: 0.4, // 匹配阈值，0表示完美匹配，1表示完全不匹配
};

const fuse = new Fuse(tableData, options);

function searchTableFuzzy() {
  let input = document.getElementById("searchInput");
  let query = input.value;
  let table = document.getElementById("myTable");
  let tr = table.getElementsByTagName("tr");

  if (query.trim() === '') {
    // 如果搜索框为空，显示所有行
    for (let i = 1; i < tr.length; i++) {
      tr[i].style.display = "";
    }
    return;
  }

  const result = fuse.search(query); // 执行模糊搜索

  // 根据搜索结果显示或隐藏行
  const matchedIndices = new Set(result.map(item => tableData.indexOf(item.item)));

  for (let i = 1; i < tr.length; i++) {
    // 这里的 i-1 是因为 tr[0] 是表头，而 tableData 是从0开始的
    if (matchedIndices.has(i - 1)) {
      tr[i].style.display = "";
    } else {
      tr[i].style.display = "none";
    }
  }
}
// 将 onkeyup="searchTableOptimized()" 改为 onkeyup="searchTableFuzzy()"