¿Hay alguna manera de crear un filtro de búsqueda para elementos HTML en función de sus valores, ID o nombres, etc. de la misma manera que puede crear un filtro de búsqueda basado en el contenido de texto de los elementos? Aquí está mi filtro de búsqueda para divs con contenido de texto. ¿Hay alguna forma de implementar el filtro de búsqueda si los divs no tienen contenido de texto? ¿Puedo acceder a la etiqueta de elementos y usarla de alguna manera?
Filtro Javascript basado en contenido de texto
let input = document.querySelector(`#input`); let animalDivs = document.querySelectorAll(`.animal`); input.addEventListener(`keyup`, function(e) { const term = e.target.value.toLowerCase(); animalDivs.forEach(function(div) { const animal = div.textContent.toLocaleLowerCase(); if (animal.includes(term)) { div.style.display = "block" } else { div.style.display = "none" } }); }); <input type="text" id="input"> <div class="container"> <div id="monkey" class="animal">The Monkey</div> <div id="mongoose" class="animal">The Mongoose</div> <div id="mouse" class="animal">The Mouse</div> <div id="moose" class="animal">The Moose</div> </div>Puedes usar atributos de datos
tag no es un atributo de etiqueta recomendado/conocido
También disminuya la velocidad en los literales de la plantilla. Elijo usar el detector de eventos de entrada también, ya que maneja pegar
let input = document.getElementById('input'); let animalDivs = document.querySelectorAll('.animal'); input.addEventListener('input', function(e) { const term = this.value.toLowerCase(); animalDivs.forEach(function(div) { const animal = div.dataset.tag.toLocaleLowerCase(); div.hidden = !animal.includes(term) }); }); <input type="text" id="input" autocomplete="off"> <div class="container"> <div data-tag="The Monkey" id="monkey" class="animal">The Monkey</div> <div data-tag="The Mongoose" id="mongoose" class="animal">The Mongoose</div> <div data-tag="The Mouse" id="mouse" class="animal">The Mouse</div> <div data-tag="The Moose" id="moose" class="animal">The Moose</div> </div>