Estoy haciendo una barra de búsqueda y este es mi código JavaScript hasta ahora:

 function search_product() { var searchbar, filter, cards, card, h1, i, txtValue; searchbar = document.getElementById('searchbar'); filter = searchbar.value.toUpperCase(); cards = document.getElementById("cards"); card = cards.getElementsByClassName('card'); searchbar.addEventListener("keyup", function (event) { if (event.key === 'Enter') { event.preventDefault(); for (i = 0; i < card.length; i++) { h1 = card[i].getElementsByTagName("h1")[0]; txtValue = h1.textContent || h1.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { card[i].style.display = ""; } else { card[i].style.display = "none"; } } } }) }

Básicamente buscando el contenido de la etiqueta h1. Todo funciona bien, pero quiero agregar un mensaje de error si no hay resultados coincidentes, así que hice este HTML y CSS:

HTML

 <div class="search-results" id="search-results"> <h1>No results found.</h1> <p>That resource does not exist.</p> <img src="../img/icons/animated/passaros.gif"> </div>

CSS

 .search-results { background-color: #131313; height: 48vh; border-radius: 5px; text-align: center; padding: 15px; display: none; } .search-results h1 { margin: 0; color: #ffffff; } .search-results p { margin: 0; color: #cccccc; }

Y lo hizo escondido. Sé cómo convertirlo en un bloque usando JS:

 document.getElementById("search-results").style.display = "block";

Pero no sé dónde poner esta línea en el JS, porque en el primer "si" básicamente verifico si la entrada está vacía y hago que todas las tarjetas vuelvan a aparecer si lo está, y en el "si no" devuelvo el resultados coincidentes.

Gracias a cualquiera que ayude de antemano.