UI-компоненты. Поиск по списку на JavaScript

Напишем код на JavaScript для поиска по списку с комментариями. Этот код создает ввод для поиска и список элементов. Когда пользователь вводит поисковый запрос, скрипт просматривает каждый элемент в списке и сравнивает его с поисковым запросом. Если поисковый запрос найден в элементе, он покажет его, в противном случае он его скроет.

HTML:

<div class="container">
  <div class="search-container">
    <input type="text" id="searchInput" placeholder="Search the list" />
  </div>
  <ul id="list">
    <li>Allie Tyler</li>
    <li>Kyle Quinn</li>
    <li>Christopher Roberts</li>
    <li>Katherine Myers</li>
    <li>Jason Reyes</li>
  </ul>
</div>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 80%;
  margin: 0 auto;
}

.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

input[type="text"] {
  width: 60%;
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #111;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  background-color: beige;
  padding: 10px;
  margin-bottom: 10px;
}

JavaScript:

// Считываем элементы input и list
const searchInput = document.querySelector("#searchInput");
const list = document.querySelector("#list");

// Добавляем прослушиватель событий при вводе в input
searchInput.addEventListener("input", function () {
  // Получаем поисковый запрос
  const searchTerm = this.value.toLowerCase();

  // Перебираем элементы списка
  for (let i = 0; i < list.children.length; i++) {
    const item = list.children[i];

    // Если поисковый запрос найден в тексте элемента, показываем его
    if (item.textContent.toLowerCase().indexOf(searchTerm) !== -1) {
      item.style.display = "block";
    } else {
      item.style.display = "none";
    }
  }
});