Реакция на ввод текста

Событиями бывают не только клики. Когда пользователь печатает в текстовом поле, поле получает событие input после каждого изменения текста: каждой напечатанной или удалённой буквы, а также когда в поле что-то вставили. Обработчик этого события может реагировать, пока пользователь ещё печатает. Вот счётчик, который показывает длину сообщения:

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

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

Как вы знаете, у текста есть length, как у массива: число его символов. Если в поле написано Привет, счётчик показывает 6 / 200. (В этом обработчике event.target — это поле, так что event.target.value тоже сработало бы.)

Поиск, который показывает результаты по мере ввода, — типичное применение input. Для него понадобятся два метода текста:

• includes() говорит, содержит ли текст другой текст. Вы знаете его по массивам, а у текста он тоже есть: "Банан".includes("нан") — это true.
• toLowerCase() — противоположность toUpperCase(): "БаНаНа".toLowerCase() — это "банана".

Заглавные и строчные буквы различаются: "Банан".includes("бан") — это false, потому что текст начинается с заглавной Б. Поиску это безразлично, поэтому перед сравнением переведите оба текста в нижний регистр. А чтобы выбрать подходящие элементы массива, есть filter() из урока о методах массивов:

const fruits = ["Яблоко", "Банан", "Вишня"];
const search = "БАН".toLowerCase();
const found = fruits.filter((fruit) => fruit.toLowerCase().includes(search));
console.log(found);

["Банан"]

filter() возвращает новый массив и оставляет fruits как был. Это именно то, что нужно поиску: когда пользователь стирает набранное, весь массив по-прежнему на месте и его можно показать. А пустой текст входит в любой текст, поэтому пустой поиск находит всё.