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