javascript - 如何让搜索过滤器循环遍历库存商品表中的多种数据类型，并缩小显示的结果范围？

Question

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

我在 php 文件中包含有效的 javascript 代码，该代码可过滤 WordPress 页面前端的库存商品表中显示的数据。

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

客户希望能够以多种方式进行搜索 - 我可以更改正在搜索的单个主题，例如我可以通过调度号、序列号、 Assets 类型、描述等进行搜索，但无法通过搜索来查看所有主题。即代码中的 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>

enter image description here

Answer 1

这个 JavaScript https://fusejs.io/搜索库可能就是您所需要的。您可能需要首先映射您的 WP 数据，但这将允许您搜索您想要的任何内容。