Удалить текущий фильтр

Question

У меня есть список элементов, завернутый в 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. Я попытался удалить последний символ, как предложено в этом сообщении , но это не сработало.

Я использую приведенный ниже код из 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

Я заменил 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(), а выше - результат. Кажется, хорошо работает после нескольких испытаний.