实时搜索栏：输入即过滤按钮元素（HTML + JavaScript 实现）-js教程-PHP中文网

实时搜索栏：输入即过滤按钮元素（HTML + JavaScript 实现）

本文教你如何用原生 HTML 和 JavaScript 构建一个实时搜索栏，支持每输入一个字符就动态筛选元素——仅显示 id 或 alt 属性以当前输入前缀开头的按钮，其余自动隐藏。无需提交按钮，响应式强、轻量高效。

本文教你如何用原生 html 和 javascript 构建一个实时搜索栏，支持每输入一个字符就动态筛选 `

要实现“输入即过滤”的搜索功能，核心在于监听元素的 input 事件（而非 change 或 submit），并在每次触发时遍历目标元素，根据输入值前缀匹配其 id 或 alt 属性。

以下是完整、可直接运行的示例代码：



  <meta charset="UTF-8"><title>实时搜索按钮</title><style>
    .searchItem { margin: 4px; padding: 8px 12px; }
    .hidden { display: none; }
  </style><input type="text" id="Search" placeholder="输入关键词（匹配 id/alt 前缀）"><!-- 示例按钮 --><button class="searchItem" id="hello">Hello Button</button>
<button class="searchItem" id="help">Help Button</button>
<button class="searchItem" id="world">World Button</button>
<button class="searchItem" id="heaven" alt="heavenly option">Heaven Option</button>
<button class="searchItem" id="test" alt="test item">Test Item</button>

<script>
  const searchBar = document.getElementById("Search");
  const searchItems = document.querySelectorAll(".searchItem"); // 推荐用 querySelectorAll 替代 getElementsByClassName

  searchBar.addEventListener("input", function (e) {
    const query = e.target.value.trim(); // 去除首尾空格，避免误判

    searchItems.forEach(el => {
      // 优先匹配 id，若无 id 则 fallback 到 alt 属性
      const matchTarget = el.id || el.getAttribute("alt") || "";

      if (query === "" || matchTarget.toLowerCase().startsWith(query.toLowerCase())) {
        el.classList.remove("hidden");
      } else {
        el.classList.add("hidden");
      }
    });
  });
</script>

✅ 关键要点说明：