Estoy creando un sitio web de la comunidad estudiantil. Tener dificultades para agregar la opción de barra de búsqueda al sitio web. Puedo agregar normal para la búsqueda, pero tuve un error para todos juntos.
¿Cómo debo agregar búsqueda de nombre aquí?
const search = async()=> { let input = document.querySelector(".input").value let searchContainer = '' const res = await getAllStudent() let response = res.data.students let searchTrack = response.filter(item => { return input === item.name || parseInt(input) === item.stuId || parseInt(input) === item.circle }) searchTrack.length > 0? searchTrack.forEach((searchItem, index) => { const {id,name, stuId, track, img, description, socialmedia:{linkedin, github, twitter, portfolio}} = searchItem; let newIndex = index+id;Como ya tiene los nombres en la página, no es necesario que los vuelva a buscar para buscarlos.
La siguiente función busca en cada tarjeta el valor que ingresa en la barra de búsqueda, y solo muestra las tarjetas que incluyen ese valor. Tenga en cuenta que la función busca en todo <div class="profile-card">...</div> , por lo que se buscará cualquier cosa en ambos lados de la tarjeta.
function search() { let input = document.querySelector(".input").value input = input.toLowerCase(); let x = document.getElementsByClassName('profile-card'); for (i = 0; i < x.length; i++) { if (!x[i].innerHTML.toLowerCase().includes(input)) { x[i].style.display = "none"; } else { x[i].style.display = "block"; } } }css-tricks tiene un artículo que explica esto un poco mejor.
¡Buena suerte!
Aquí hay algunas funciones adicionales:
const stringLowerCase = (value) => value.toString().toLowerCase(); const isMatched = (value, matchBy) => stringLowerCase(value).match(stringLowerCase(matchBy));Luego actualicé tu código de filtro:
let searchTrack = response.filter( (item) => isMatched(item.name, input) || isMatched(item.stuId, input) || isMatched(item.circle, input) );