<input type="text" id="searchInput" placeholder="输入关键词搜索...">
<ul id="itemList">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>葡萄</li>
  <li>草莓</li>
</ul>

const searchInput = document.getElementById('searchInput');
const itemList = document.getElementById('itemList');
const listItems = itemList.getElementsByTagName('li');

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

  for (let i = 0; i < listItems.length; i++) {
    const item = listItems[i];
    const text = item.textContent.toLowerCase();

    if (text.includes(keyword)) {
      item.style.display = '';
    } else {
      item.style.display = 'none';
    }
  }
});

let timer;
searchInput.addEventListener('input', function() {
  clearTimeout(timer);
  timer = setTimeout(() => {
    // 执行过滤逻辑
  }, 150);
});

const fruits = ['苹果', '香蕉', '橙子', '葡萄', '草莓'];

function renderList(items) {
  itemList.innerHTML = items.map(name =>
    `<li>${name}</li>`
  ).join('');
}

searchInput.addEventListener('input', () => {
  const filtered = fruits.filter(fruit =>
    fruit.toLowerCase().includes(searchInput.value.toLowerCase())
  );
  renderList(filtered);
});

// 初始渲染
renderList(fruits);