Estoy trabajando en un proyecto que requiere una barra de búsqueda en un sitio web que buscaría a través de un archivo JSON (con suerte). No tiene que ser json, pero debe poder almacenar otra información sobre un objeto. Esto es lo que tengo ahora mismo,
function search_animal() { let input = document.getElementById('searchbar').value input=input.toLowerCase(); let x = document.getElementsByClassName('room'); //input = the input in the search bar //x = the list of elements for (i = 0; i < x.length; i++) { if (!x[i].innerHTML.toLowerCase().includes(input)) { x[i].style.display="none"; } else { x[i].style.display="list-item"; } } } <input id="searchbar" onkeyup="search_animal()" type="text" name="search">No sé cómo hacer que aparezcan los resultados mientras escribo y cómo mostrar el objeto con otras características además del nombre.
Supongamos que tiene un JSON real (en cadena), cada objeto de esta matriz json representa un animal.
en primer lugar, analizamos el JSON en una matriz de objetos javascript con JSON.parse()
Ahora, su función que busca es casi perfecta para su caso de uso, pero dado que su ejemplo no mostró qué es .room , acabo de crear un HTML <ul> que contendrá los elementos de la lista dinámica creada.
En el for , obtenga cada objeto y verifique si el Nombre incluye lo que se busca. En caso afirmativo, cree un <li> y agréguele cualquier contenido/HTML y luego agregue este nuevo elemento de lista a su <ul>
Vea si el siguiente código es similar a lo que necesita
let jsonData = `[ {"Name": "Lion", "Color": "Yellow"}, {"Name": "Monkey", "Color": "Orange"}, {"Name": "Fish", "Color": "Blue"}, {"Name": "Cat", "Color": "Black"} ]` let data = JSON.parse(jsonData) function search_animal() { let input = document.getElementById('searchbar').value input = input.toLowerCase(); let x = document.querySelector('#list-holder'); x.innerHTML = "" for (i = 0; i < data.length; i++) { let obj = data[i]; if (obj.Name.toLowerCase().includes(input)) { const elem = document.createElement("li") elem.innerHTML = `${obj.Name} - ${obj.Color}` x.appendChild(elem) } } } <input id="searchbar" onkeyup="search_animal()" type="text" name="search"> <ul id="list-holder"> </ul>