Remove current filter

Question

I have a list of items wrapped in div that can either be filtered using drop down or input box. How do you remove the filter from input box before filtering using the drop down? It only affect when filtered via input first then drop-down. It works the other way around.

I have an input box that filters the div with the following:

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

The filter is cleared when user manually deletes the input box value. I found out I can't trigger a delete or backspace key. I tried removing the last character as suggested on this post but it didn't work.

I'm using below code from w3school to filter the elements via a drop down.

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

I added below in filterSelection() but it seems to only work once. Subsequent filters between drop-down and input don't work.

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

Side note; in both of your snippets you are misusing the `filter()` method. The filter method is intended to reduce an array to a subset. In both of your cases, you are not doing this, only using it to iterate over the result stack. If the only thing you want is iteration, use `each()` instead. — Taplar, Feb 19 '20 at 18:20
@Taplar, thanks for the suggestion. I will research each() and redo the code. — Tamras Merin, Feb 19 '20 at 18:25

Tamras Merin · Answer 1 · 2020-02-19T21:38:52.273

I replaced filter() with .each() and removed all the code I got from w3school (i.e. add/remove classes) and just used below

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;

}

When I was looking into .each() I looked into .toggle() as well and above is the result. Seems to work well after few tests.

Remove current filter

1 Answers1