使用部分匹配過濾/搜索表 - HTML & Javascript

Question

我有一個 HTML 表，我正在嘗試使用模糊搜索和部分匹配進行過濾。 我嘗試了許多 JS 庫，但它們似乎沒有同時提供這兩種過濾器選項。 我嘗試過 FuzySort.js、FlexSearch.js 等。 有誰知道可以做到這一點的圖書館？

基礎：

• MySQL 存儲數據。
• 前端顯示表格。
• 管理員有一個單獨的前端，讓他們可以將數據添加/刪除/編輯到 MySQL。
• JavaScript 在前端過濾/排序/搜索表客戶端。

要求：

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

預期結果：如果...

• 表行 #1 的名稱為“Name1”
• 表行 #2 的名稱為“Name2”
• 表第 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 使它們不是全局的。