內容篩選：文字框即時搜尋與清單過濾（input 事件與 includes）

2026 iThome 鐵人賽

DAY 4

JavaScript

解決學了JavaScript不知道能做什麼：用DOM操作打造實用網頁效果系列第 4 篇

18th鐵人賽

jw0801

2026-09-18 16:38:02

49 瀏覽

分享至

前言

當頁面資料量變多時（例如商品目錄、通訊錄），給使用者一個搜尋框來「即時過濾內容」能大幅提升體驗。今天我們就來學習如何結合 DOM 的 input 事件與字串比對，打造流暢的過濾效果。

核心觀念與語法拆解

input 事件：比 keyup 更適合搜尋框，無論是打字、刪字還是滑鼠右鍵貼上文字，都能即時捕捉內容變化。
includes() 函式：判斷字串是否包含關鍵字，回傳 true 或 false。搭配 toLowerCase() 還能輕鬆做到不區分大小寫的搜尋！

實作程式碼

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <title>第四課 - 即時搜尋過濾清單</title>
  <style>
    body { font-family: sans-serif; padding: 40px; background-color: #f8f9fa; }
    .search-box { padding: 10px; width: 250px; font-size: 16px; margin-bottom: 20px; }
    ul { list-style: none; padding: 0; width: 270px; }
    li { padding: 12px; background: white; margin-bottom: 8px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    /* 隱藏項目的 CSS 類別 */
    .hide { display: none; }
  </style>
</head>
<body>

  <h2>即時物品搜尋清單</h2>
  <input type="text" id="searchInput" class="search-box" placeholder="搜尋水果（如：蘋果）...">

  <ul id="fruitList">
    <li class="fruit-item">蘋果 (Apple)</li>
    <li class="fruit-item">香蕉 (Banana)</li>
    <li class="fruit-item">芭樂 (Guava)</li>
    <li class="fruit-item">蓮霧 (Wax Apple)</li>
    <li class="fruit-item">葡萄 (Grape)</li>
  </ul>

  <script>
    // ----------------------------------------------------
    // JavaScript 邏輯 (DOM 操作)
    // ----------------------------------------------------

    // 第一步：取得搜尋輸入框與所有的水果清單項目 (NodeList 陣列)
    const searchInput = document.getElementById("searchInput");
    const fruitItems = document.querySelectorAll(".fruit-item");

    // 第二步：為輸入框綁定 'input' 事件，只要打字就會立刻觸發
    searchInput.addEventListener("input", function() {
      
      // 取得使用者輸入的文字，並轉為小寫與清除前後空格
      const filterText = searchInput.value.toLowerCase().trim();

      // 第三步：用 forEach 歷遍每一個水果清單項目 <li>
      fruitItems.forEach(function(item) {
        
        // 取得目前這個水果項目的文字內容，同樣轉為小寫
        const itemText = item.innerText.toLowerCase();

        // 第四步：使用 includes 判斷水果名稱是否包含搜尋關鍵字
        if (itemText.includes(filterText)) {
          // 如果包含，移除 'hide' 類別讓它顯示
          item.classList.remove("hide");
        } else {
          // 如果不包含，加上 'hide' 類別將它隱藏
          item.classList.add("hide");
        }
        
      });
      
    });
  </script>
</body>
</html>