Interaktywna wyszukiwarka produktów na żywo

Treść zadania

W sklepie mamy tablicę artykułów biurowych:
const artykuly = [ { nazwa: "Długopis niebieski" }, { nazwa: "Ołówek grafitowy" }, { nazwa: "Długopis czarny" } ];
W dokumencie przygotowano pole wyszukiwania <input type="text" id="poleSzukaj"> oraz listę <ul id="wynikiWyszukiwania"></ul>.
Na zdarzenie input pola wyszukiwania:
1. Wyczyść listę #wynikiWyszukiwania.innerHTML = ''.
2. Pobierz wpisaną frazę w małych literach za pomocą toLowerCase().trim().
3. Przefiltruj tablicę wybierając elementy, których nazwa zawiera szukaną frazę (artykul.nazwa.toLowerCase().includes(fraza)).
4. Dla każdego pasującego elementu utwórz <li> z nazwą i dołącz do listy.

Co będzie oceniane

Nasłuchiwanie zdarzenia input na #poleSzukaj.
Filtrowanie z użyciem toLowerCase() i includes().
Wygenerowanie odpowiednich elementów li w #wynikiWyszukiwania.
Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.

Testy automatyczne (2)

Wpisanie frazy 'długopis' wyświetla 2 trafienia — licznik #wynikiWyszukiwania li = 2; tekst #wynikiWyszukiwania li:first-child = Długopis niebieski
Wpisanie frazy 'ołówek' wyświetla 1 trafienie — licznik #wynikiWyszukiwania li = 1; tekst #wynikiWyszukiwania li:first-child = Ołówek grafitowy

Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.

const artykuly = [
  { nazwa: "Długopis niebieski" },
  { nazwa: "Ołówek grafitowy" },
  { nazwa: "Długopis czarny" }
];

// Filtruj artykuły na bieżąco w zdarzeniu input i generuj li w #wynikiWyszukiwania

Wskazówki

Wskazówka 1

Metoda includes sprawdza, czy dany fragment tekstu znajduje się wewnątrz dłuższego łańcucha znaków.

Wskazówka 2

Podepnij funkcję pod zdarzenie input pola tekstowego, wyczyść listę wyników, przefiltruj tablicę metodą filter z wykorzystaniem toLowerCase oraz includes, a pasujące wyniki dodaj jako nowe elementy li do listy.