Cómo hacer una lista de filtros que respondan al tipo de usuario. Por ejemplo, esta es la lista de datos de la base de datos.
<input type="search" class="search" name="search"> <ul class="find"> <li>Bird</li> <li>Cabbage</li> <li>Cat</li> <li>Dog</li> <li>Eagle</li> <li>Egg</li> <li>Frog</li> <li>Fist</li> </ul>No tengo ningún código JavaScript o jQuery para mostrar porque no sé cómo hacerlo. Lo que quiero cuando un usuario escribe la primera letra en el cuadro de búsqueda, se filtrará en la lista. Por ejemplo, el usuario escribe la primera letra en el cuadro de búsqueda letra B, debe filtrar toda la lista que comienza con la letra B y no importa si la letra escrita es grande o pequeña. ¿Hay alguien que pueda ayudarme con esto? Gracias.
Puedes usar datalist .
El elemento HTML contiene un conjunto de elementos que representan las opciones permitidas o recomendadas disponibles para elegir dentro de otros controles.
<input list="animals" type="search" class="search" name="search"> <datalist class="find" id="animals"> <option>Bird</option> <option>Cabbage</option> <option>Cat</option> <option>Dog</option> <option>Eagle</option> <option>Egg</option> <option>Frog</option> <option>Fist</option> </datalist>Agregue un detector de eventos de input a la entrada que oculte todos los elementos li cuyo textContent no incluya el valor de la entrada:
const items = document.querySelectorAll('.find li'); search.addEventListener('input', function(){ let val = search.value.toLowerCase(); items.forEach(e => e.style.display = e.textContent.toLowerCase().includes(val) ? 'block' : 'none') }) <input type="search" class="search" name="search" id="search"> <ul class="find"> <li>Bird</li> <li>Cabbage</li> <li>Cat</li> <li>Dog</li> <li>Eagle</li> <li>Egg</li> <li>Frog</li> <li>Fist</li> </ul>Puede usar "startsWith" para verificar si el contenido de texto de li comienza con el texto de entrada o no.
const input = document.querySelector("input"); const list = document.querySelectorAll("ul > li"); function showData(inputText) { list.forEach(el => { const text = el.textContent.toLowerCase(); if (text.startsWith(inputText.toLowerCase())) el.style.display = "block"; else el.style.display = "none"; }) } input.addEventListener("input", e => { showData(e.target.value) }) <input type="search" class="search" name="search"> <ul class="find"> <li>Bird</li> <li>Cabbage</li> <li>Cat</li> <li>Dog</li> <li>Eagle</li> <li>Egg</li> <li>Frog</li> <li>Fist</li> </ul>