如何使用搜索栏与JavaScript过滤HTML中的完整div元素？

先指出你原代码里的核心问题： #

• 目标元素选错了：你要过滤的是带block类的div，但原代码里却去查找ul类元素，完全没定位到正确对象
• 语法错误：x[i].getElementsByClassName.display是无效写法，控制元素显示隐藏要直接操作style.display属性
• 显示属性错误：div是块级元素，显示时应该设为block而非list-item

正确实现方案： #

首先确保你的搜索栏HTML绑定了触发事件（如果还没加的话）：

<input type="text" id="searchbar" oninput="filterLP()" placeholder="搜索游戏系列...">

替换你的JavaScript代码为以下版本：

function filterLP() {
    // 获取搜索输入并转为小写，实现大小写不敏感匹配
    const input = document.getElementById('searchbar').value.toLowerCase();
    // 选中所有需要过滤的block类div
    const blocks = document.querySelectorAll('.block');
    
    blocks.forEach(block => {
        // 获取当前div内的所有文本内容并转小写
        const text = block.textContent.toLowerCase();
        // 根据是否包含关键词控制显示/隐藏
        block.style.display = text.includes(input) ? 'block' : 'none';
    });
}

可选优化点： #

• 如果只想精准匹配h1里的系列名称（而非整个div的所有文本），可以把block.textContent改成block.querySelector('h1').textContent
• 使用querySelectorAll比getElementsByClassName更灵活，返回的静态NodeList遍历更稳定
• 当输入为空时，所有div会自动恢复显示，无需额外处理逻辑

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