如何在JavaScript中使用搜索過濾器和復選框過濾器進行高級過濾器邏輯？

Question

我有一個搜索過濾器和一個復選框過濾器，它可以工作，但要單獨使用。 例如，如果我檢查類別，它將進行過濾，但是如果我在搜索框中輸入文本，類別過濾器將消失，就好像它會重新設置過濾器一樣。 就像我說的，它們是單獨工作的：(

這是我的javascript

    var input, filter, found, table, tr, td, i, j;     

    function myFunction() {
        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");
            for (j = 0; j < td.length; j++) {
                if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                    found = true;
                }
            }
            if (found) {
                tr[i].style.display = "";
                found = false;
            } else {
                if (tr[i].id !== 'tableHeader'){tr[i].style.display = "none";}
            }
        }
    }

    $(function() {
        $('input[type="checkbox"]').change(function() {
          if($('input[type="checkbox"]:checked').length > 0) {
            var vals = $('input[type="checkbox"]:checked').map(function() {
              return this.value;
            }).get();
            $('#myTable tr')
            .hide()    // 1
            .filter(function() {    // 2
            $('#tableHeader').show();
              return vals.indexOf($(this).find('td:eq(4)').text()) > -1;
            }).show();
          } else {
            // Show all
            $('#myTable tr').show();
          }
        });
      });        

Answer 1

您必須分離用於過濾相同視圖的函數。 每個功能都忽略另一個功能的設置（即僅根據其觸發控制設置視圖）。

您需要創建一個將同時考慮這兩個值的邏輯（例如，函數）-搜索輸入和復選框。 然后從這些控件觸發此邏輯。