如果没有找到产品，如何显示错误消息？

Question

我有一个 search.js 文件，它读取 json 文件并检索有关某些产品的信息，然后将其显示在页面中。 如果搜索时没有找到产品，我试图显示一条错误消息，这部分几乎可以工作。 如果搜索不存在的产品，则会正确显示错误消息：

问题是，如果我搜索名称与其他名称不相似的产品，错误仍然会出现..例如：

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"
    }
...
]

错误div的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 => {
            // console.log(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}
        });
    });

我知道问题出在我显示错误消息的方式上

        if (!isVisible){
            let avisoErro = document.getElementById("avisoDeErro")
            avisoErro.classList.remove('d-none')
        } else {
            let avisoErro = document.getElementById("avisoDeErro")
            avisoErro.classList.add('d-none');
        }

但我想不出另一种方法来做到这一点

尝试改变方式看是否没有产品匹配，没有成功

Answer 1

由于您已在 forEach 循环中添加了显示错误消息的逻辑，并且当循环针对每个产品运行时，如果列表中的任何产品与搜索值不匹配，则会显示错误消息，并且也会显示匹配的产品。

searchInput.addEventListener("input", (e) => {
  let avisoErro = document.getElementById("avisoDeErro")
  const value = e.target.value.toLowerCase()

  const matchedProducts = produtos.filter(produto => {
    if(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;
      return true;  
    }
  })

  const isVisible = matchedProducts.length <= 0
  // Show an error message only when none of the product matched
  if (!isVisible){
    avisoErro.classList.remove('d-none')
  } else {
    avisoErro.classList.add('d-none');
  }
})