Estoy trabajando con esta API: http://hp-api.herokuapp.com/api/characters , que devuelve una matriz de objetos. Tengo una entrada en mi HTML que tiene un detector de eventos "keyup".
document.getElementById('search').addEventListener('keyup', filterWizards)Objetivo: quiero buscar activamente a través de la matriz de objetos devueltos por la API para ver si el nombre o el valor de las propiedades de la casa incluye el texto del elemento de entrada. Luego filtraré el DOM para incluir información basada en lo que se escribe
Ejemplo: si un usuario comenzó a escribir Harry Potter; "Har..." mi programa comenzará a buscar en cada objeto de la matriz de objetos para ver si el objeto incluye "Har" como parte del texto del nombre o propiedad de la casa. O tal vez tenían la intención de buscar en una casa como Gryffindor, cuando comenzaron a escribir Gryffindor, pude filtrar a través de la variedad de objetos y elegir hacer cosas como mostrar los caracteres en mi DOM que cumplen con el criterio.
Datos devueltos desde la API:
let characters = 'http://hp-api.herokuapp.com/api/characters'; fetch(characters) .then(res => res.json()) // parse response as JSON .then(data => { console.log(data); }) .catch(err => { console.error(`error ${err}`) });Suponiendo un campo de entrada con una identificación de "entrada", puede filtrar los resultados para que coincidan con el valor del campo de entrada:
<input id="input"> <script> fetch(characters) .then(res => res.json()) // parse response as JSON .then(data => { console.log(data); let re = new RegExp(document.getElementById('input').value); let matches = data.filter(function(elmt){ return elmt.name.match(re); }); console.log(matches); }) .catch(err => { console.error(`error ${err}`) }); </script>Esto es lo que haría:
filter y una comparación datalist toLowerCase() (para har encuentre Harry Potter ). const search = document.getElementById('search'), characters = document.getElementById('characters'); let searchList; fetch('http://hp-api.herokuapp.com/api/characters') .then(res => res.json()) // parse response as JSON .then(data => { searchList = data; enableSeach(data); updateDatalist(''); }) .catch(err => { console.error(`error ${err}`) }); function enableSeach(data) { search.disabled = false; search.placeholder = 'Type to search'; search.addEventListener('input', () => { updateDatalist(search.value); }); } function updateDatalist(searchTerm) { characters.innerHTML = ''; searchList.filter(char => char.name.toLowerCase().includes(searchTerm.toLowerCase())).forEach(({name}) => { let option = document.createElement('option'); option.value = name; characters.append(option); }) } <input id="search" type="search" placeholder="Fetching data..." disabled list="characters" autocomplete="false"> <datalist id="characters"></datalist>