Фильтры HTML-таблицы, не фильтрующие несколько фильтров

Question

Фильтры работают корректно в качестве отдельных фильтров только в том случае, если пользователь фильтрует в «пакетах», он будет фильтроваться по мере необходимости или если пользователь будет фильтровать «Ночи», он будет фильтроваться по мере необходимости.

Если пользователь хочет фильтровать двумя или более фильтрами, а не возвращать правильные результаты, он будет возвращать результаты только для последнего отфильтрованного только . Т.е. если пользователь фильтрует по Пакету: Серебро и Ночи: 3, он должен возвращайте четыре результата, а не 12.

Требование состоит в том, чтобы возвращать точные результаты на основе всех выбранных пользователем фильтров.

«s взяты из линии 65 - 67 и от линии 2243 - 2292.

Было бы бонус, если„число людей“вход было выпадающие формами со значениями 1, 2, 3, 4, но это не требование на данный момент.

код слишком большой, чтобы вставить см ссылку Table 1

Answer 1

Вы можете хотите объединить 3 функции в 1, потому что они выглядят практически одинаково.

function filter() { 
    var filter_package = document.getElementById("myInput").value.toUpperCase().trim(); 
    var filter_num_nights = document.getElementById("myInput1").value.toUpperCase().trim(); 
    var filter_num_people = document.getElementById("myInput2").value.toUpperCase().trim(); 

    var rows = document.querySelectorAll("tr"); 

    // First few rows are headers 
    for (var i = 2; i < rows.length; i++) { 
     var items = rows[i].querySelectorAll("td"); 
     if (items.length === 0) continue; 

     var pkg = items[0]; 
     var night = items[1]; 
     var people = items[2]; 

     var package_text = pkg.innerHTML.toUpperCase().trim(); 
     var night_text = night.innerHTML.toUpperCase().trim(); 
     var people_text = people.innerHTML.toUpperCase().trim(); 

     if (package_text.includes(filter_package) && 
      night_text.includes(filter_num_nights) && 
      people_text.includes(filter_num_people)) { 
      rows[i].style.display = ""; 
     } else { 
      rows[i].style.display = "none"; 
     } 
    } 
} 

и модифицировать KeyUp события для поля ввода, как показано ниже:

<input type="text" id="myInput" onkeyup="filter()" placeholder="Search for Packages.." title="Type in a Package name"> 
<input type="text" id="myInput1" onkeyup="filter()" placeholder="Search for Number of Nights.." title="Type in Number of Nights"> 
<input type="text" id="myInput2" onkeyup="filter()" placeholder="Search for Number of People.." title="Type in Number of People"> 

Пожалуйста, обратите внимание

Если ваш браузер не поддерживает string.includes наивности, то вы можете скопировать и вставить следующий код polyfill в ваш код javascript. (ref: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/includes):

if (!String.prototype.includes) { 
    String.prototype.includes = function(search, start) { 
    'use strict'; 
    if (typeof start !== 'number') { 
     start = 0; 
    } 

    if (start + search.length > this.length) { 
     return false; 
    } else { 
     return this.indexOf(search, start) !== -1; 
    } 
    }; 
}