使用部分匹配- HTML和Javascript筛选/搜索表

Question

我有一个HTML表，我试图使用模糊搜索和部分匹配过滤。我尝试过许多JS库，但它们似乎不能同时提供这两个筛选器选项。我试过FuzySort.js，FlexSearch.js和其他。有人知道有图书馆能做到这一点吗？

基金会：

• MySQL存储数据。
• 前端显示表。
• 管理员有一个单独的前端，它们可以将数据添加/删除/编辑到
• ，以过滤/排序/搜索前端的表客户端。

Requirements:

• 全文搜索
• 模糊
• matches.

预期结果：如果.

表#1的名称为"Name1"

• Table第2行，名称为"Name2"

• Table行#3，名称为“Name3”

• ，在搜索栏中，键入"Name1 Name3“，它将显示第1行和第3行

当前结果：

• 在搜索栏中，当您键入"Name1 Name3“时，它不会显示结果。

电流码

    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 = "";        
        }
      }       
    }
  }
}

这里所发生的是，我们创建多个要匹配的筛选字符串，用一个空格分隔。一旦至少有一个筛选器，我们就隐藏每一行，如果它与至少一个筛选器匹配，则再次添加它。

哦，我对您的变量进行了一些重构:我们不需要事先声明器，我们希望让它们成为let或const，这样它们就不会是全局的。