Estoy haciendo un reproductor de audio y tengo una lista de divs que actúan como mi lista de reproducción... Estoy usando JS para hacer la lista y estoy usando este script para buscarlos:
/*Search Songs*/ function searchSongs(){ let input = _('#songSearch').value.toLowerCase(); let items = _all('.item'); let dividers = _all(".divider"); for (let i = 0; i < items.length; i++) { if (!items[i].innerHTML.toLowerCase().includes(input)) { items[i].style.display = "none"; } else { items[i].style.display = ""; } } // add noresults message at end if all list divs are hidden if (!items.innerHTML.toLowerCase().includes(input)) { _('.noResults').innerHTML = `<p>No results found for "${input}"` } } Tengo un elemento de párrafo al final de mi lista (sin nada en él) y quiero mostrar el mensaje ( <p>No results found for "${input}" ). ¿Hay algún js que pueda usar para lograr esto? El script anterior funciona para la búsqueda, pero no funciona para el mensaje.
/*Search Songs*/ function searchSongs(){ let input = _('#songSearch').value.toLowerCase(); let items = _all('.item'); let dividers = _all(".divider"); let counter = 0; for (let i = 0; i < items.length; i++) { if (!items[i].innerHTML.toLowerCase().includes(input)) { items[i].style.display = "none"; counter++; } else { items[i].style.display = ""; } } // keeping the result 22 letters long (for asthetic purposes) let maxLen = 22; if (input.length > maxLen) { input = input.substring(0, maxLen - 3) + "..."; } if (counter >= items.length) { _('#noResults').innerHTML = `No results found for "${input}"` //add no results message if all items are hidden... } else { _('#noResults').innerHTML = `` //else hide the message by removing text. } }¡¡Gracias, @Asif!!
He hecho una pequeña modificación en su función. Espero que esto resuelva tu problema.
/*Search Songs*/ function searchSongs(){ let input = _('#songSearch').value.toLowerCase(); let items = _all('.item'); let dividers = _all(".divider"); let counter = 0; for (let i = 0; i < items.length; i++) { if (!items[i].innerHTML.toLowerCase().includes(input)) { items[i].style.display = "none"; } else { items[i].style.display = ""; counter++; } } // add noresults message at end if all list divs are hidden if (counter > 0) { _('.noResults').innerHTML = `<p>No results found for "${input}"` } }