时间戳

首页 > 解决方案 > 删除当前过滤器

javascript - 删除当前过滤器

问题描述

我有一个包含在其中的项目列表div，可以使用下拉列表或输入框进行过滤。在使用下拉菜单进行过滤之前，如何从输入框中删除过滤器？input它仅在通过first then过滤时起作用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)
});
});

当用户手动删除输入框值时，过滤器被清除。我发现我无法触发deleteorbackspace键。我尝试按照这篇文章的建议删除最后一个字符，但没有奏效。

我正在使用来自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)
        });
    }

标签： javascriptjqueryhtmlfilter

解决方案

我替换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()结果，上面是结果。经过几次测试后似乎效果很好。

推荐阅读