Auf das Tippen reagieren

Klicks sind nicht die einzigen Ereignisse. Wenn der Nutzer in ein Textfeld tippt, bekommt das Feld nach jeder Änderung seines Textes das Ereignis input: bei jedem getippten oder gelöschten Buchstaben und auch, wenn etwas eingefügt wird. Ein Handler dafür kann reagieren, während der Nutzer noch tippt. Hier ist ein Zähler, der anzeigt, wie lang eine Nachricht ist:

const nachrichtInput = document.querySelector("#nachricht");
const zaehler = document.querySelector("#zaehler");

nachrichtInput.addEventListener("input", function () {
    zaehler.textContent = `${nachrichtInput.value.length} / 200`;
});

Wie du weißt, hat Text eine length wie ein Array: die Zahl seiner Zeichen. Mit Hallo im Feld zeigt der Zähler 5 / 200. (In diesem Handler ist event.target das Feld, also würde auch event.target.value funktionieren.)

Eine Suche, die Ergebnisse schon während des Tippens zeigt, ist ein typischer Einsatz von input. Dafür brauchst du zwei Methoden von Text:

• includes() sagt, ob ein Text einen anderen Text enthält. Du kennst es von Arrays, und Text hat es auch: "Banane".includes("nan") ist true.
• toLowerCase() ist das Gegenteil von toUpperCase(): "BaNaNe".toLowerCase() ist "banane".

Groß- und Kleinbuchstaben spielen eine Rolle: "Banane".includes("ban") ist false, weil der Text mit einem großen B beginnt. Eine Suche sollte das nicht kümmern, also mache beide Texte klein, bevor du sie vergleichst. Und um die passenden Elemente eines Arrays auszuwählen, gibt es filter() aus der Lektion über Array-Methoden:

const obst = ["Apfel", "Banane", "Kirsche"];
const suche = "BAN".toLowerCase();
const gefunden = obst.filter((frucht) => frucht.toLowerCase().includes(suche));
console.log(gefunden);

["Banane"]

filter() gibt dir ein neues Array und lässt obst, wie es war. Genau das braucht eine Suche: Wenn der Nutzer löscht, was er getippt hat, ist das ganze Array noch da, um es anzuzeigen. Und ein leerer Text ist in jedem Text enthalten, also findet eine leere Suche alles.