I'm trying to add a button that can clear the values of search input and also remove any filters (which is normally done by pressing a button such as backspace)..
I've tried calling the same function that does the filter but it didn't seem to work. I've been trying it with no luck until now...
Please see my code so far:
// Links Filter
var input = document.getElementById("search-filter-cards");
input.addEventListener("input", searchFilterDivsMenu);
function searchFilterDivsMenu(e) {
var filter = e.target.value.toUpperCase();
var list = document.getElementById("links-list");
var divs = list.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var a = divs[i].getElementsByTagName("a")[0];
if (a) {
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
divs[i].style.display = "";
} else {
divs[i].style.display = "none";
}
}
}
}
// Clear input and filter
function clearSearchFilterInput() {
document.getElementById('search-filter-cards').value = "";
searchFilterDivsMenu();
}<div id="anchor-cards-list">
<input id="search-filter-cards" type="text">
<div id="links-list">
<div class="card">
<a href="#">example</a>
</div>
<div class="card">
<a href="#">AAA</a>
</div>
<div class="card">
<a href="#">BBB</a>
</div>
</div>
<button onclick="clearSearchFilterInput();">Clear and Reset Search</button>What's the proper way of actually clearing the filter? I've tried searching and searching but the only result online is this: How to refresh filter search WHEN the "clear button" at the edge of a text <input> is clicked?
Thank you in advance for any help.
change function clearSearchFilterInput like below is simplest way in this code i think
function clearSearchFilterInput() {
document.getElementById('search-filter-cards').value = "";
input.dispatchEvent(new Event("input"));
}
// Links Filter
var input = document.getElementById("search-filter-cards");
input.addEventListener("input", searchFilterDivsMenu);
function searchFilterDivsMenu(e) {
var filter = e.target.value.toUpperCase();
var list = document.getElementById("links-list");
var divs = list.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var a = divs[i].getElementsByTagName("a")[0];
if (a) {
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
divs[i].style.display = "";
} else {
divs[i].style.display = "none";
}
}
}
}
// Clear input and filter
function clearSearchFilterInput() {
document.getElementById('search-filter-cards').value = "";
input.dispatchEvent(new Event("input"));
}<div id="anchor-cards-list">
<input id="search-filter-cards" type="text">
<div id="links-list">
<div class="card">
<a href="#">example</a>
</div>
<div class="card">
<a href="#">AAA</a>
</div>
<div class="card">
<a href="#">BBB</a>
</div>
</div>
<button onclick="clearSearchFilterInput();">Clear and Reset Search</button>You are reading undefined at
var filter = e.target.value.toUpperCase();
since you don't pass any event object to the function
searchFilterDivsMenu();
You could emulate the event like
input.dispatchEvent(new Event("input"));
// Links Filter
var input = document.getElementById("search-filter-cards");
input.addEventListener("input", searchFilterDivsMenu);
function searchFilterDivsMenu(e) {
var filter = e.target.value.toUpperCase();
var list = document.getElementById("links-list");
var divs = list.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var a = divs[i].getElementsByTagName("a")[0];
if (a) {
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
divs[i].style.display = "";
} else {
divs[i].style.display = "none";
}
}
}
}
// Clear input and filter
function clearSearchFilterInput() {
document.getElementById('search-filter-cards').value = "";
input.dispatchEvent(new Event("input"));
}<div id="anchor-cards-list">
<input id="search-filter-cards" type="text">
<div id="links-list">
<div class="card">
<a href="#">example</a>
</div>
<div class="card">
<a href="#">AAA</a>
</div>
<div class="card">
<a href="#">BBB</a>
</div>
</div>
<button onclick="clearSearchFilterInput();">Clear and Reset Search</button>