如何在物化CSS中过滤/搜索列表

<input type="text" id="search-input" placeholder="搜索列表">

<ul class="list">
  <li class="list-item">列表项1</li>
  <li class="list-item">列表项2</li>
  <li class="list-item">列表项3</li>
  <li class="list-item">列表项4</li>
</ul>

.list-item {
  display: block;
}

.hidden {
  display: none;
}

const searchInput = document.getElementById('search-input');
const listItems = document.querySelectorAll('.list-item');

searchInput.addEventListener('input', function() {
  const searchTerm = searchInput.value.toLowerCase();

  listItems.forEach(function(item) {
    const itemText = item.textContent.toLowerCase();

    if (itemText.includes(searchTerm)) {
      item.classList.remove('hidden');
    } else {
      item.classList.add('hidden');
    }
  });
});