JavaScript实现UL列表过滤功能失效问题求助

我来帮你排查一下UL列表过滤功能失效的常见原因，结合你的描述，大概率是这几个问题中的一个：

可能的故障原因 #

• DOM加载时机不对：如果你的JavaScript代码在页面DOM元素还没加载完成时就执行了，那获取输入框或UL元素会得到null，自然无法进行后续操作。
• 遍历对象错误：你提到用for (i = 0; i < ul.length; i++)遍历UL，但ul是单个DOM元素，它的length属性为0，你应该遍历的是UL下的<li>子元素集合，而不是UL本身。
• 输入内容获取错误：可能你没有正确使用input.value来获取输入框的文本内容，或者选择器写错导致没拿到输入框元素。
• 事件绑定缺失：没有给输入框绑定input或keyup这类触发过滤的事件，导致输入时不会执行过滤逻辑。

正确的实现示例 #

HTML代码 #

<input type="text" id="filterInput" placeholder="输入关键词过滤...">
<ul id="itemList">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
  <li>葡萄</li>
  <li>西瓜</li>
</ul>

JavaScript代码 #

// 确保DOM加载完成后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  // 获取输入框和列表元素
  const filterInput = document.getElementById('filterInput');
  const itemList = document.getElementById('itemList');
  // 获取所有列表项
  const items = itemList.querySelectorAll('li');

  // 给输入框绑定input事件（输入/粘贴都会触发）
  filterInput.addEventListener('input', function() {
    // 获取输入值并转成小写，实现不区分大小写过滤
    const filterValue = this.value.toLowerCase();

    // 遍历所有列表项
    items.forEach(item => {
      // 获取列表项文本并转小写
      const itemText = item.textContent.toLowerCase();
      // 判断是否包含关键词，控制显示/隐藏
      if (itemText.includes(filterValue)) {
        item.style.display = 'block';
      } else {
        item.style.display = 'none';
      }
    });
  });
});

关键要点解释 #

1. DOM加载时机：用DOMContentLoaded事件确保代码在所有DOM元素加载完成后执行，避免获取不到元素的问题。
2. 正确遍历列表项：用querySelectorAll('li')获取UL下的所有列表项，得到一个可遍历的元素集合。
3. 不区分大小写过滤：把输入值和列表项文本都转成小写，提升用户体验。
4. 事件选择：使用input事件比keyup更全面，能覆盖粘贴、输入法输入等场景。

内容的提问来源于stack exchange，提问作者Asking