Создайте текстовое поле и список элементов. При вводе текста в поле должны отображаться только те элементы списка, которые содержат введённый текст.
Ожидаемое поведение:
• При вводе текста список фильтруется по введённым данным.
• Поиск нечувствителен к регистру.
• Если текстовое поле пустое, отображается весь список.
Решение задачи🔽
<input type="text" id="searchInput" placeholder="Введите текст для поиска">
<ul id="itemList">
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Grapes</li>
<li>Peach</li>
</ul>
const searchInput = document.getElementById('searchInput');
const itemList = document.getElementById('itemList');
const items = itemList.getElementsByTagName('li');
searchInput.addEventListener('input', () => {
const filter = searchInput.value.toLowerCase();
Array.from(items).forEach((item) => {
const text = item.textContent.toLowerCase();
item.style.display = text.includes(filter) ? '' : 'none';
});
});