产品搜索错误提示逻辑异常问题求助

当前搜索功能存在问题：搜索无匹配产品时错误提示正常显示，但搜索存在的产品（名称与其他产品不相似）时，错误提示仍会出现。

相关文件结构与代码 #

JSON产品数据结构 #

[
    {
        "nome": "Carro",
        "apelido": "ft.car",
        "desc": "descrição",
        "img": "/img/carro.png",
        "link": "/pag/carro.html"
    }, 
    {
        "nome": "Carreta Bi-Trem",
        "apelido": "ft.big.truck",
        "desc": "descrição",
        "img": "/img/carreta.png",
        "link": "/pag/carreta.html"
    }
    // 更多产品项
]

错误提示HTML代码 #

<div class="col-12 d-none" id="avisoDeErro">
  <div class="alert alert-danger p-5 rounded shadow">
    <i class="bi bi-x-circle-fill"></i> <strong>Erro</strong>
    <hr>
    <div class="fs-1 ">
      Nenhum produto encontrado.
      <p class="fw-light">Acha que deveria ter algo aqui? Entre em contato com o suporte.</p>
    </div>
  </div>
</div>

原search.js代码 #

const produtosCardTemplate = document.querySelector("[data-produtos-template]");
const produtosCardContainer = document.querySelector("[data-produtos-cards-container]");
const searchInput = document.querySelector("[data-search]");

let produtos = [];

searchInput.addEventListener("input", (e) => {
    const value = e.target.value.toLowerCase()
    produtos.forEach(produto => {
        console.log(value)
        const isVisible = value.split(' ').every(word => produto.nome.toLowerCase().includes(word)) || value.split('.').every(word => produto.apelido.toLowerCase().includes(word))
        produto.element.classList.toggle("hide", !isVisible) //hide = display: none !important; 
        console.log(isVisible)
        
        // Show a error message
        if (!isVisible){
            let avisoErro = document.getElementById("avisoDeErro")
            avisoErro.classList.remove('d-none')
        } else {
            let avisoErro = document.getElementById("avisoDeErro")
            avisoErro.classList.add('d-none');
        }
    })
})

fetch("/produtos.json")
    .then(res => res.json())
    .then(data => {
        produtos = data.map(produto => {
            const card = produtosCardTemplate.content.cloneNode(true).children[0]
            const nome = card.querySelector("[data-nome]")
            const desc = card.querySelector("[data-desc]")
            const img = card.querySelector("[data-img]")
            const imgLink = card.querySelector("[data-img-link]")
            const link = card.querySelector("[data-link]")
            
            nome.textContent = produto.nome
            desc.textContent = produto.desc
            img.setAttribute("src", produto.img)
            imgLink.setAttribute("href", produto.link) 
            link.setAttribute("href", produto.link)

            produtosCardContainer.append(card)

            return {nome: produto.nome, apelido: produto.apelido, element: card}
        });
    });

问题分析 #

原错误提示逻辑是在遍历每个产品时单独判断：只要当前产品不匹配就显示错误提示，只要有一个产品匹配就隐藏提示。但遍历过程中，后一个不匹配的产品会覆盖前一个匹配产品的隐藏操作，导致只要存在不匹配产品，错误提示就会被强制显示，完全不符合需求。

正确逻辑应该是：判断所有产品中是否存在至少一个匹配项，完全没有匹配项时才显示错误提示，否则隐藏。

修复方案 #

修改search.js中的输入监听事件，先收集所有产品的匹配状态，再统一判断是否显示错误提示：

// 提前获取错误提示元素，避免重复查询DOM
const avisoErro = document.getElementById("avisoDeErro");

searchInput.addEventListener("input", (e) => {
    const value = e.target.value.trim().toLowerCase()
    let hasMatch = false;
    
    // 输入为空时显示所有产品并隐藏提示
    if (!value) {
        produtos.forEach(produto => {
            produto.element.classList.remove("hide")
        })
        avisoErro.classList.add('d-none')
        return;
    }
    
    produtos.forEach(produto => {
        const isVisible = value.split(' ').every(word => produto.nome.toLowerCase().includes(word)) || value.split('.').every(word => produto.apelido.toLowerCase().includes(word))
        produto.element.classList.toggle("hide", !isVisible)
        
        // 标记是否存在匹配产品
        if (isVisible) {
            hasMatch = true;
        }
    })
    
    // 根据匹配结果统一控制错误提示
    avisoErro.classList.toggle('d-none', hasMatch)
})

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