JavaScript实现用户输入实时筛选product-name产品卡片问题排查

问题说明 #

需要实现：搜索框输入内容时，实时筛选带有product-name类的卡片，匹配的显示、不匹配的隐藏（比如输入“Piz”显示含“Pizza”的卡片）。现有代码仅能在控制台打印用户输入，筛选功能完全不生效。

原代码问题分析 #

你的JavaScript代码存在几个关键错误：

• 变量冗余+命名冲突：开头data = this.data;完全没用，this在全局函数里指向window，window.data根本不存在，而且后面forEach回调又用data当参数，造成变量混淆。
• 循环逻辑错误：document.querySelectorAll('.cards')返回的是所有带cards类的单个卡片元素，forEach的回调参数data就是单个卡片DOM元素，不是数组，所以data.length是undefined，里面的for循环根本不会执行。
• 类名拼写错误：代码里写的是.produce-name，但HTML里的类是product-name（少了个d），导致找不到元素，直接报错。
• 未做容错处理：如果某个卡片没有product-name元素，productName会是undefined，访问textContent会直接阻断代码执行。

修复后的代码 #

JavaScript代码 #

// 搜索筛选功能
const search = () => {
    const input = document.getElementById("user-input");
    const filter = input.value.toUpperCase();
    console.log("User input: " + input.value);
    
    // 遍历所有卡片元素
    document.querySelectorAll('.cards').forEach(card => {
        // 查找当前卡片里的product-name元素
        const productName = card.querySelector(".product-name");
        if (!productName) {
            // 没有找到名称元素的话默认隐藏
            card.style.display = "none";
            return;
        }
        const txtValue = productName.textContent.trim().toUpperCase();
        // 判断是否匹配，决定显示/隐藏
        card.style.display = txtValue.includes(filter) ? "" : "none";
    });
};

HTML代码（无需修改） #

<form class="form-inline flexSearchWrapper">
  <input class="form-control mr-sm-2" type="search" placeholder="Busca algo..." aria-label="Search" id="user-input" onkeyup="search();">
</form>

卡片HTML结构（无需修改） #

<div class="card cards">
  <img src="https://images.vexels.com/media/users/3/185266/isolated/lists/815ded7afc1c54dfb5a60f81f68f928b-pizza-slice-icon.png" class="card-img-top p-3 product-image" alt="...">
  <div class="card-body">
    <h5 class="card-title product-name">Pizza</h5>
    <h5 class="text-muted fw-bold card-price product-price">S/ 12.50 PEN</h5>
  </div>
</div>

修复要点说明 #

• 去掉冗余的变量赋值，直接获取输入框和筛选关键词
• 用forEach直接遍历每个卡片，不需要嵌套for循环
• 修正类名拼写错误，确保能正确找到产品名称元素
• 增加容错判断，避免因找不到元素导致代码报错
• 使用includes()替代indexOf()，逻辑更清晰直观

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