CODEWITHSUNDEEP
htmlfiltering
CraigF
CraigF

Reputation: 321

HTML table filters not filtering multiple filters

Filters work correctly as separate filters only i.e. if a user filters in "packages", it will filter as required or if a user filters "Nights" it will filter as required.

If a user wants to filter by two or more filters,rather than return the correct results, it will return the results for the last filtered only i.e. If a user filters by Package:Silver and Nights:3, it should return four results, not 12.

The requirement is to return the exact results based on all filters chosen by the user.

The 's are from line 65 - 67 and the is from line 2243 - 2292.

It would be a bonus if the "number of people" input was a drop down form with values 1, 2, 3, 4 , but that's not a requirement at this point.

Code too large to paste, see link Table 1

Upvotes: 1

Views: 160

Answers (1)

Eddie
Eddie

Reputation: 1063

You might wanna combine 3 functions into 1 because they look almost identical.

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

and modify the keyup events for the input boxes like below:

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

Please note

If your browser does not support string.includes naively then you can copy and paste the following polyfill into your javascript code. (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;
    }
  };
}

Upvotes: 1

Related Questions