Quiero borrar una barra de búsqueda. La idea era buscar a través de una lista en una tabla. Una función de búsqueda se llama onkeyup desde una entrada, luego agregué un borrador de íconos que borra la entrada al hacer clic (intervalo).
Aunque se borre la entrada, la búsqueda aún se muestra con la lista de resultados de la búsqueda. Me gustaría volver a la lista completa haciendo clic en el icono del borrador. ¿Cualquier sugerencia?
function search() { var input, filter, found, table, tr, td, i, j; input = document.getElementById("searchInput"); filter = input.value.toUpperCase(); table = document.getElementById("list"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td"); for (j = 0; j < td.length; j++) { if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) { found = true; } } if (found) { tr[i].style.display = ""; found = false; } else if (!tr[i].id.match('^tableHeader')) { tr[i].style.display = "none"; } } }; <div class="search-box pull-left"> <form action=""> <input type="search" id="searchInput" onkeyup="search()" placeholder="Search..." title="Type in anything"> <span id="clearSearch" onclick="document.getElementById('searchInput').value = null;"> <i class="ti-eraser"></i> </span> </form> </div>¿Te refieres a agregar la búsqueda al controlador de eventos del borrado?
Tenga en cuenta que moví los controladores de eventos en línea y cambié al mejor evento de "entrada", ya que también maneja pegar y cambié el valor nulo a una cadena vacía
Habría sido más fácil probar si tuviera tu mesa.
window.addEventListener("DOMContentLoaded", function() { document.getElementById("clearSearch").addEventListener("click", function() { document.getElementById('searchInput').value = ""; search(); }); document.getElementById("searchInput").addEventListener("input", search) }); const search = () => { var input, filter, found, table, tr, td, i, j; input = document.getElementById("searchInput"); filter = input.value.toUpperCase(); table = document.getElementById("list"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td"); for (j = 0; j < td.length; j++) { if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) { found = true; } } if (found) { tr[i].style.display = ""; found = false; } else if (!tr[i].id.match('^tableHeader')) { tr[i].style.display = "none"; } } }; window.addEventListener("DOMContentLoaded", function() { document.getElementById("clearSearch").addEventListener("click", function() { document.getElementById('searchInput').value = ""; search(); }); document.getElementById("searchInput").addEventListener("input", search) }); <div class="search-box pull-left"> <form action=""> <input type="search" id="searchInput" placeholder="Search..." title="Type in anything"> <span id="clearSearch"> <i class="ti-eraser"></i> </span> </form> </div> <table id="list"><tbody> <tr><td>Some text</td></tr> </tbody></table>