电商网站搜索功能优化：初始隐藏结果，聚焦或输入时显示

1. 设置初始隐藏状态 #

用CSS直接给搜索结果容器添加默认隐藏样式，避免页面加载时出现短暂的结果闪现：

#ProdukteListe {
  display: none;
}

2. 给搜索框添加触发事件 #

修改HTML中的搜索框，新增点击事件，点击时触发结果列表显示：

<input class="suche" type="search" placeholder="Search.." id="search-item" onkeyup="search()" onclick="showResults()">

3. 更新JavaScript逻辑 #

添加显示结果的函数，同时优化原搜索函数，确保输入字符时自动显示列表并完成筛选：

// 点击搜索框时显示所有结果
function showResults() {
  const resultsList = document.getElementById("ProdukteListe");
  resultsList.style.display = "block";
  
  // 空输入状态下显示全部产品
  if (document.getElementById("search-item").value === "") {
    document.querySelectorAll(".ProduktName").forEach(item => {
      item.style.display = "";
    });
  }
}

// 修改原搜索函数，确保搜索操作时列表处于显示状态
const search = () => {
  const searchVal = document.getElementById("search-item").value.toUpperCase(); 
  const resultsList = document.getElementById("ProdukteListe");
  const products = document.querySelectorAll(".ProduktName");

  // 强制显示结果列表
  resultsList.style.display = "block";

  products.forEach(product => {
    const productName = product.querySelector('h2');
    if (productName) {
      const text = productName.textContent.toUpperCase();
      product.style.display = text.includes(searchVal) ? "" : "none";
    }
  });
}

可选优化：空输入失焦时自动隐藏 #

如果需要在清空输入并点击页面其他区域时隐藏结果列表，给搜索框添加失焦事件：

<input class="suche" type="search" placeholder="Search.." id="search-item" onkeyup="search()" onclick="showResults()" onblur="hideResultsIfEmpty()">

对应的JS函数：

function hideResultsIfEmpty() {
  const searchVal = document.getElementById("search-item").value.trim();
  if (!searchVal) {
    document.getElementById("ProdukteListe").style.display = "none";
  }
}

以上修改可实现需求：页面加载时搜索结果默认隐藏，点击搜索框或输入首个字符时显示对应结果。

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