Seguí un codepen simple (mi versión: https://codepen.io/naomimekeel/pen/rNzoeGQ ) para crear una búsqueda js en vivo, pero necesito una forma de mostrar un mensaje "Lo siento, no se encontraron resultados" si la entrada no no coincide con ninguno de los elementos de la lista. Sé que este es probablemente un detector de eventos simple, pero no soy competente en javascript y no puedo encontrar ninguna respuesta que coincida con esta forma específica de filtrado. ¿Cuál es la mejor manera de hacer esto?

 <div class="facstaffsearchbar"> <input type="text" id="facstaff-search" name="facstaff-search" rel="facstaff-search" placeholder="🔍 Search for a donor on this list . . ." /> <div rel="facstaff-data" id="facstaff-data"> <div class="facstaff-data-item">+Terry Laughlin KGSB '81 & Regina L. Aldisert<span style="display:none!important;"></span></div> <div class="facstaff-data-item">+Dr. W. Harry Archer, DEN '27, A&S '37 & +Mrs. Louise E. Archer, A&S '27<span style="display:none!important;"></span></div> <div class="facstaff-data-item">+Lauren H. Ashe, A&S '14<span style="display:none!important;"></span></div> <div class="facstaff-data-item">+William R. Baierl, EDUC '51<span style="display:none!important;">Bill, Willy</span></div> <div class="facstaff-data-item">Bettye J. Bailey, CGS '84 & +Ralph E. Bailey<span style="display:none!important;"></span></div> </div>

 const searchInput = document.querySelector('input[rel="facstaff-search"]'); searchInput.addEventListener('input', function (event) { const input = event.target; const query = event.target.value; const results = input.parentNode; const data = results.querySelectorAll(".facstaff-data-item"); if (input.value) { for (let i = 0, len = data.length; i < len; i++) { data[i].innerHTML.toLowerCase().includes(input.value.toLowerCase()) ? data[i].style.display = 'block' : data[i].style.display = 'none'; } } else { for (let i = 0, len = data.length; i < len; i++) { data[i].style.display = 'block'; } } });