Question

过滤器只能作为单独的过滤器正常工作，即如果用户过滤了＆＃34;包＆＃34;，它将根据需要进行过滤，或者如果用户过滤了＃34; Nights＆＃34;它会根据需要进行过滤。

如果用户想要按两个或更多过滤器进行过滤，而不是返回正确的结果，则会返回上次过滤的结果即如果用户按包过滤：银牌和夜晚：3，则应返回4个结果，而不是12个。

要求是根据用户选择的所有过滤器返回准确的结果。

这是来自第65-67行，而来自第2243-2522行。

如果＆＃34;人数和＃34;这将是一个奖励。输入是一个值为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代码中。（参考：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;
    }
  };
}

HTML表过滤器不过滤多个过滤器

1 个答案: