如何用JavaScript实现点击‘X’按钮清空搜索框并同步恢复筛选状态？

数据老陈

2026-8-13

解决搜索框清空按钮无法自动重置筛选状态的问题

你的核心问题是：点击清空按钮（id为clear的span）仅清空了输入框内容，但没有触发筛选逻辑，导致页面元素仍保持筛选后的状态。而退格键能恢复是因为触发了onkeyup事件，自动调用了search_ads()函数。

直接解决方案

修改clearSearch()函数，在清空输入框后手动调用search_ads()，让筛选逻辑重新执行一次：

function clearSearch() {
  const input = document.getElementById('adSearch');
  input.value = "";
  search_ads(); // 触发筛选重置
}

代码优化建议

原代码还有一些可以优化的地方，让逻辑更简洁稳定：

复用已通过querySelectorAll获取的items集合，无需每次搜索重新获取
用forEach循环替代传统for循环，代码更简洁易读
用textContent替代innerHTML，避免HTML标签干扰搜索匹配结果
统一用const/let声明变量，避免全局变量污染

优化后的完整JavaScript代码：

const search = document.getElementById("Search");
const items = document.querySelectorAll(".filterDiv");

function search_ads() {
  const inputValue = document.getElementById('adSearch').value.toLowerCase();
  
  items.forEach(item => {
    const itemText = item.textContent.toLowerCase();
    item.style.display = itemText.includes(inputValue) ? "" : "none";
  });
}

function clearSearch() {
  const input = document.getElementById('adSearch');
  input.value = "";
  search_ads();
}