Einen Film auswählen

Neun Filme sind eine große Auswahl. In dieser Übung grenzt der Nutzer die Liste ein: nach Genre und durch das Eintippen eines Teils des Titels.

Das Genre. Das select genre hat die Option Alle Genres mit dem Wert "alle" und eine Option für jedes Genre, deren Wert das Genre so ist, wie es in filme.json steht, zum Beispiel "komödie". Wenn der Nutzer ein Genre auswählt, zeigt die Liste nur die Filme dieses Genres.

Die Suche. Während der Nutzer in das Feld suche tippt, zeigt die Liste nur die Filme, deren Titel den getippten Text enthält, in Groß- oder Kleinbuchstaben: zu findet sowohl Kevin – Allein zu Haus als auch Zurück in die Zukunft. Beide Auswahlen gelten gleichzeitig: Das Genre Sci-Fi und der Text zurück lassen nur Zurück in die Zukunft übrig. Ein leeres Feld zeigt alle Filme des gewählten Genres.

Ein Tipp: Die Suche funktioniert wie die Suche nach Ländern in der Lektion Ereignisse und Formulare: Wandle sowohl den Titel als auch den getippten Text mit toLowerCase() in Kleinbuchstaben um und prüfe dann mit includes(), ob der Titel den getippten Text enthält. Und lade die Filme nicht bei jeder Auswahl neu: Zeichne die Liste mit filter() aus den Filmen, die du schon hast, noch einmal.