搜索和过滤列表元素JS

const list = document.getElementById('list');
const searchInput = document.getElementById('searchInput');

searchInput.addEventListener('input', search);

function search() {
  const keyword = searchInput.value.toLowerCase(); // 获取输入的关键字并转为小写
  const items = list.getElementsByTagName('li'); // 获取列表中的所有元素

  // 遍历列表元素，隐藏不匹配的元素并显示匹配的元素
  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    const text = item.textContent.toLowerCase(); // 获取列表元素的文本内容并转为小写

    if (text.includes(keyword)) {
      item.style.display = 'block'; // 显示匹配的元素
    } else {
      item.style.display = 'none'; // 隐藏不匹配的元素
    }
  }
}