let input = document.getElementById('searchInput') let searchField = document.getElementById('searchField') input.addEventListener('keyup', (e) => { const string = e.target.value const filteredUsers = users.filter((user) => { if (string != '') { if (user.name.first.toLowerCase().includes(string) || user.name.last.toLowerCase().includes(string)) { return user } else { searchField.innerHTML = '' } } else { searchField.innerHTML = '' } }) filteredUsers.map(user => { personImg = user.picture.thumbnail person = user.name.first + ' ' + user.name.last searchField.innerHTML += `<li class="list-group-item"><img src='${personImg}'>${person}</li>` })})Me las arreglé para escribir una función de búsqueda que devuelve una imagen de usuario, nombre y apellido obtenidos. La búsqueda es por nombre y apellido. Sin embargo, después de ingresar el nombre y si se muestran varias opciones, si presiono la barra espaciadora para ingresar un apellido de mi elección, se rompe. ¿Cómo lo implemento para que funcione?
Reemplace esto:
const string = e.target.value if (user.name.first.toLowerCase().includes(string) || user.name.last.toLowerCase().includes(string)) {Con este:
const q1 = e.target.value.split(' ')[0] const q2 = e.target.value.split(' ')[1] if (user.name.first.toLowerCase().includes(q1) && (!q2 || user.name.last.toLowerCase().includes(q2))) {} De esta manera, dividió a John Doe en John y Doe y buscó John en los nombres y Doe en los apellidos. ( !q2 || es para cuando la consulta de búsqueda solo contiene el primer nombre).
Aquí hay una respuesta más completa:
// mock user data let user = {name: {first: 'John', last: 'Doe'}} // mock event let e = {target: {value: 'John D'}} // searched queries const q1 = e.target.value.toLowerCase().split(' ')[0] const q2 = e.target.value.toLowerCase().split(' ')[1] let matched = false; const first = user.name.first.toLowerCase(); const last = user.name.last.toLowerCase(); if(!q2){ // when we entered just `John`, // then we should match all first names or last names containing `John` if(first.includes(q1) || last.includes(q1)) matched = true; }else{ // when we entered just `John D`, first name should match `John` and last name should match `D`. if(first.includes(q1) && last.includes(q2)) matched = true; } if (matched) {} Además, si los nombres pueden tener más fragmentos (como: John Doe Smith ), puede dividir la cadena de búsqueda en fragmentos, buscarlos dentro de los nombres y ordenar los resultados. algo como :
let foundUser = undefined; e.target.value.split(' ').forEach(q => { if (user.name.first.toLowerCase().includes(q) || user.name.last.toLowerCase().includes(q)) { foundUser = user; } }) if(foundUser){...}else{...}