javascript - 删除当前过滤器

Question

我有一个包含在 div 中的项目列表，可以使用下拉列表或输入框进行过滤。在使用下拉菜单进行过滤之前，如何从输入框中删除过滤器？它仅在先通过输入然后通过下拉进行过滤时才会产生影响。反之亦然。

我有一个输入框，可以使用以下内容过滤 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)
        });
    }

Answer 1

我用 .each() 替换了 filter() 并删除了我从 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()，上面是结果。经过几次测试似乎效果很好。