Reakce na psaní

Kliknutí není jediná událost. Když uživatel píše, dostane textové pole událost input po každé změně svého textu: po každém napsaném nebo smazaném písmenu, a taky když do něj někdo něco vloží. Obsluha této události může reagovat ještě během psaní. Tady je počítadlo, které ukazuje, jak dlouhá je zpráva:

const vstupZprava = document.querySelector("#zprava");
const pocitadlo = document.querySelector("#pocitadlo");

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

Text má length stejně jako pole: počet svých znaků. Když je v textovém poli Ahoj, počítadlo ukáže 4 / 200. (V této obsluze je event.target samo textové pole, takže by fungovalo i event.target.value.)

Typické použití události input je hledání, které ukazuje výsledky už během psaní. K tomu potřebujete dvě metody textu:

• includes() řekne, jestli text obsahuje jiný text. Znáte ji od polí a text ji má taky: "Banán".includes("nán") je true.
• toLowerCase() je opak toUpperCase(): "BaNáN".toLowerCase() je "banán".

Na velkých a malých písmenech záleží: "Banán".includes("ban") je false, protože text začíná velkým B. Při hledání by na nich ale záležet nemělo, a tak oba texty před porovnáním převeďte na malá písmena. A k výběru odpovídajících prvků pole máte filter() z lekce o metodách polí:

const ovoce = ["Jablko", "Banán", "Třešeň"];
const hledane = "BAN".toLowerCase();
const nalezene = ovoce.filter((nazev) => nazev.toLowerCase().includes(hledane));
console.log(nalezene);

["Banán"]

filter() vám dá nové pole a ovoce nechá, jak bylo. Přesně to hledání potřebuje: když uživatel napsaný text smaže, celé pole je pořád k dispozici. A prázdný text je součástí každého textu, takže prázdné hledání najde všechno.