Creé una barra de búsqueda con vanilla js que carga elementos de una matriz de API. Cuando busco por primera vez, carga una imagen, un título y un precio. pero cuando escribe una segunda búsqueda, la lista no se actualiza. Tampoco puede hacer clic fuera de él.
<body> <input type="text" id="searchBar" onkeyup="getItemList()" class="blgSearch" name="search bar" placeholder="Type In Item"><button id="searchBtn" onclick="btnFunction" type="submit">search</button> <div id="itemsFilter"> <!-- <div class="item"> <img src="" alt="image"/> <h2>Item Title</h2> <div>cost</div></div> --> </div> <script src="/search.js"></script>y guión
//connect to API let path = "<path>"; let devKey = "<key>"; let token = "<token>"; const api = path+ devKey + token; const url = encodeURI(api) let itemsList= []; window.addEventListener('DOMcontentLoaded', loadContent) //displays loaded content function loadContent(){ getItemList(); btnfunction(); } fetch(url) .then (res => res.json()) .then(data => {console.log(data); itemsList= data}) //activate on keyup const searchBar = document.getElementById('searchBar'); //activate onclick // const searchBtn = document.getElementById('searchBtn'); //searchBar.addEventListener("keyup", getItemList); const itemsFilter = document.getElementById('itemsFilter'); //filter out items by name function getItemList(){ console.log(itemsList); let filteredItems= itemsList.rows.filter(item=> item.name.includes(searchBar.value)); //create the filtered items element filteredItems.forEach(filteredItem => { let itemDiv = ` <div class="item"> <img src="${filteredItem.picture}" class="filteredImg" alt=""/> <h2 class="itemName" >${filteredItem.name}</h2> <div class="itemPrice" >$${filteredItem.base_cost}</div> </div> ` itemsFilter.insertAdjacentHTML("beforeend", itemDiv); }); } function searchBnt() { }¿algun consejo?