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

Question

Please excuse me if I use the wrong terminology.

I have working javascript code in a php file which filters what data is displayed in a table of stock items on a WordPress page front-end.

ie search by serial number and the more you type the less items are shown on a WordPress front-end until one unique item is found.

Client wants to be able to search in a variety of ways - and I can change which single topic is being searched eg I can get it to search by dispatch number, serial, asset type, description etc, but cannot get the search to look at all the topics. ie the id in the code only allows me to choose one of the elements

If I change the "1" here to "2" or "3" etc it chnages the search focus from column 1 to 2 to 3 etc.

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

Can anyone suggest how to search all the data at the same time?

<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

This javascript https://fusejs.io/ search library might be all you need. You might need to map your WP data first but this will let you search for anything you want.

Answer 2

Try this:

Replace

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

by this

(Set column numbers you need in the [1,4,5] list)

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