如何让搜索过滤器循环遍历库存项目表中的 MULTIPLE 数据类型，并缩小显示的结果范围？

Question

如果我使用了错误的术语，请原谅。

我在 php 文件中有工作 javascript 代码，该文件过滤了 WordPress 页面前端的库存项目表中显示的数据。

即按序列号搜索，键入的越多，在 WordPress 前端显示的项目就越少，直到找到一个唯一项目。

客户希望能够以多种方式进行搜索 - 我可以更改正在搜索的单个主题，例如我可以通过调度号、序列号、资产类型、描述等进行搜索，但无法让搜索查看所有的话题。 即代码中的id只允许我选择其中一个元素

如果我将此处的“1”更改为“2”或“3”等，它将搜索焦点从第 1 列更改为 2 到 3 等。

td = tr[i].getElementsByTagName("td")[1];

谁能建议如何同时搜索所有数据？

<script>
    function helloWorld() {
        var input, filter, table, tr, td, sn, ty, own, i, id;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("adminTable");
        tr = table.getElementsByTagName("tr");
        var data = new Array();
        // Loop through all table rows, and hide those who don't match the search query
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
                if(td.children[0].checked) {
                    sn = tr[i].getElementsByTagName("td")[4];
                    ty = tr[i].getElementsByTagName("td")[9];
                    id = tr[i].getElementsByTagName("td")[10];
                    own = tr[i].getElementsByTagName("td")[11];
                    var record = {serial: sn.textContent || sn.innerText, type: ty.textContent || ty.innerText, id: id.textContent || id.innerText, owner: own.textContent || own.innerText};
                    data.push(record);
                }
            }
        }

        if(data.length > 0) {
            var uri = JSON.stringify(data);
            var res = encodeURIComponent(uri); 
            window.location.href = '../stock?transferData='.concat(res);
        }
    }
function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("adminTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  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";
      }
    }
  }
}
</script>

在此处输入图像描述

Answer 1

这个 javascript https://fusejs.io/搜索库可能是您所需要的。 您可能需要先 map 您的 WP 数据，但这将让您搜索您想要的任何内容。

Answer 2

尝试这个：

代替

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

这样

（在 [1,4,5] 列表中设置您需要的列号）

  var columns = [1,4,5];
  // Loop through all table rows, and hide those who don't match the search query  
  for (var j=0, lenj=columns.length; j < lenj; j++) {     
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[columns[j]];
        if (td) {
          txtValue = td.textContent || td.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        }
      }
  }