Skrypt 11: Filtrowanie listy elementów na żywo (wyszukiwarka)

Teoria

Pole wyszukiwania, które NA BIEŻĄCO (bez przycisku "Szukaj" i bez przeładowania strony) ukrywa elementy listy niepasujące do wpisanej frazy — bardzo częsty element list produktów czy filmów.

Kod (JavaScript)

<input type="text" id="szukaj" placeholder="Szukaj filmu...">
<ul id="listaFilmow">
    <li>Podróż w czasie</li>
    <li>Ostatni bastion</li>
    <li>Cichy ocean</li>
</ul>

<script>
    const pole = document.getElementById("szukaj");
    const elementyListy = document.querySelectorAll("#listaFilmow li");

    pole.addEventListener("input", function () {
        const fraza = pole.value.toLowerCase();

        for (const element of elementyListy) {
            const tekst = element.textContent.toLowerCase();
            element.style.display = tekst.includes(fraza) ? "list-item" : "none";
        }
    });
</script>

Komentarz i wyjaśnienie kodu

.toLowerCase() zamienia tekst na małe litery PO OBU stronach porównania (fraza wyszukiwania i tekst elementu), dzięki czemu wyszukiwanie nie rozróżnia wielkości liter. .includes(fraza) sprawdza, czy tekst ZAWIERA podaną frazę gdziekolwiek w środku (nie tylko na początku). Skrócony zapis warunek ? wartośćA : wartośćB to tzw. operator warunkowy — odpowiednik krótkiego if/else zwracającego jedną z dwóch wartości.

Typowe błędy

Częsty błąd to porównywanie tekstu BEZ .toLowerCase() — wyszukiwanie "podróż" nie znalazłoby wtedy elementu "Podróż w czasie" z powodu wielkiej litery P.