Filter/Search A Table 使用部分匹配 - HTML & Javascript

Question

我有一个 HTML table，我正在尝试使用模糊搜索和部分匹配来过滤它。我尝试过很多 JS 库，但它们似乎并没有同时提供这两种过滤器选项。我试过 FuzySort.js、FlexSearch.js 等。有谁知道可以做到这一点的图书馆吗？

基础：

MySQL 存储数据。
前端显示table。
管理员有一个单独的前端让他们 add/remove/edit 数据到 MySQL。
JavaScript 到 filter/sort/search 前端的 table 客户端。

要求：

全文搜索
模糊搜索
部分匹配。

预期结果： 如果...

Table 第 1 行的名称为“Name1”
Table 第 2 行的名称为“Name2”
Table 第 3 行的名称为“Name3”
然后在搜索栏中输入“Name1 Name3”，它应该会显示第 1 行和第 3 行

当前结果：

在搜索栏中，当您键入“姓名 1 姓名 3”时，它没有显示任何结果。

当前代码

    function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}

这是我的 JSFiddle： https://jsfiddle.net/h7p8bzs0/

非常感谢任何帮助或指导。有没有人对什么库可以实现这些结果有任何建议，或者我如何调整上面的 JS 代码来做到这一点？

Ps：抱歉，我是新手，对使用 JSON、Node.JS、实际数据库等选项不知所措

Answer 1

您可能想尝试以下方法Javascript：

function myFunction() {
  const input = document.getElementById("myInput");
  const filters = input.value.toUpperCase().split(' '); // create several filters separated by space
  const table = document.getElementById("myTable");
  const tr = table.getElementsByTagName("tr");

  for (let i = 0; i < tr.length; i++) {
    const td = tr[i].getElementsByTagName("td")[1];

    if (td) {
      const txtValue = td.textContent || td.innerText;
        tr[i].style.display = "none"; // hide each row
        
      for (filter of filters) { // add the rows matching a filter
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";        
        }
      }       
    }
  }
}

这里发生的是我们创建了多个要匹配的过滤器字符串，由 space 分隔。一旦我们有至少一个过滤器，我们就会隐藏每一行，如果它至少匹配一个过滤器，我们会再次添加它。

哦，我稍微重构了你的变量：我们不需要预先声明符，我们希望将它们作为 let 或 const，这样它们就不是全局的。

Filter/Search A Table 使用部分匹配 - HTML & Javascript

Filter/Search A Table Using Partial Match - HTML & Javascript

javascript

mysql

json

full-text-search

fuzzy-search