删除当前过滤器答案

【问题标题】：Remove current filter删除当前过滤器
【发布时间】：2020-02-20 05:38:52
【问题描述】：

我有一个包含在div 中的项目列表，可以使用下拉菜单或输入框进行过滤。在使用下拉菜单进行过滤之前，如何从输入框中删除过滤器？它仅在先通过input 然后通过drop-down 过滤时才有效。它反过来工作。

我有一个输入框，它使用以下内容过滤div：

$("#dirSearchKey").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#searchBlock div[class^=filterDiv]").each(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});

当用户手动删除输入框值时，过滤器被清除。我发现我无法触发delete 或backspace 键。我尝试按照post 的建议删除最后一个字符，但没有成功。

我正在使用来自w3school 的以下代码通过下拉菜单过滤元素。

function filterSelection(c, d) {
var x, i;
    x = document.getElementsByClassName("filterDiv");

if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
document.getElementById('formheader').innerHTML = d + ' Form(s)';
}

function w3AddClass(element, name) {
var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}

function w3RemoveClass(element, name) {
var i, arr1, arr2;
    arr1 = element.className.split(" ");
    arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
        arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
}
element.className = arr1.join(" ");
}

我在filterSelection() 中添加了以下内容，但它似乎只能工作一次。 drop-down 和 input 之间的后续过滤器不起作用。

        var srcVal = document.getElementById('dirSearchKey').value;
    if (srcVal !== '') {
        document.getElementById('dirSearchKey').value = '';
        $("#searchBlock div[class^=filterDiv]").filter(function() {
            var value = '';
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    }

【问题讨论】：

旁注；在您的两个 sn-ps 中，您都在滥用 filter() 方法。 filter 方法旨在将数组缩减为子集。在这两种情况下，您都没有这样做，只是使用它来迭代结果堆栈。如果您唯一需要的是迭代，请改用each()。
@Taplar，感谢您的建议。我会研究 each() 并重做代码。
看起来你根本没有调用 filterSelection()。

标签： javascript jquery html filter

【解决方案1】：

我将 filter() 替换为 .each() 并删除了我从 w3school 获得的所有代码（即添加/删除类）并在下面使用

function filterSelection(d) {

if (d == "All") d = "";

$("#searchBlock div[class^=filterDiv]").each(function() {
    $(this).removeAttr("style");
    $(this).toggle($(this).text().indexOf(d) > -1);
});

document.getElementById('formheader').innerHTML = d;

}

当我查看.each() 时，我也查看了.toggle()，上面是结果。经过几次测试后似乎运行良好。

【讨论】：