Estoy tratando de agregar un botón que pueda borrar los valores de la entrada de búsqueda y también eliminar los filtros (lo que normalmente se hace presionando un botón como el de retroceso).
Intenté llamar a la misma función que hace el filtro, pero no parece funcionar. Lo he estado intentando sin suerte hasta ahora...
Por favor, vea mi código hasta ahora:
// 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>¿Cuál es la forma correcta de limpiar el filtro? Intenté buscar y buscar, pero el único resultado en línea es este: ¿Cómo actualizar la búsqueda del filtro CUANDO se hace clic en el "botón borrar" en el borde de un texto <entrada>?
Gracias de antemano por cualquier ayuda.
cambiar la función clearSearchFilterInput como a continuación es la forma más sencilla en este código, creo
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>Estás leyendo indefinido en
var filter = e.target.value.toUpperCase();
ya que no pasa ningún objeto de evento a la función
searchFilterDivsMenu();
Podrías emular el evento como
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>