Reacting to Typing

Clicks aren't the only events. When the user types into a text field, the field gets the event input after every change of its text: each letter typed or deleted, and also when something is pasted in. A handler for it can react while the user is still typing. Here's a counter that shows how long a message is:

const messageInput = document.querySelector("#message");
const counter = document.querySelector("#counter");

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

As you know, text has a length, like an array: the number of its characters. With Hello in the field, the counter shows 5 / 200. (In this handler, event.target is the field, so event.target.value would work too.)

A search that shows results as you type is a typical use of input. For it, you need two methods of text:

• includes() says whether a text contains another text. You know it from arrays, and text has it too: "Banana".includes("nan") is true.
• toLowerCase() is the opposite of toUpperCase(): "BaNaNa".toLowerCase() is "banana".

Uppercase and lowercase letters matter: "Banana".includes("ban") is false, because the text starts with a capital B. A search shouldn't care about that, so turn both texts into lowercase before you compare them. And to pick the matching items of an array, there's filter() from the lesson on array methods:

const fruits = ["Apple", "Banana", "Cherry"];
const search = "BAN".toLowerCase();
const found = fruits.filter((fruit) => fruit.toLowerCase().includes(search));
console.log(found);

["Banana"]

filter() gives you a new array and leaves fruits as it was. That's just what a search needs: when the user deletes what they typed, the whole array is still there to show. And an empty text is part of every text, so an empty search finds everything.