昨天我們成功把 API 抓到的資料動態變成了一整排漂亮的會員卡片。但想像一下，如果今天我們的資料庫有 500 筆資料，使用者不可能一筆一筆慢慢往下滑去找人吧？

這時候，我們就需要為網站加上一個即時搜尋與過濾功能！

今天我們就要來介紹 JavaScript 陣列超級強大的超能力——.filter() 過濾方法，讓我們的網頁瞬間擁有像 App 一樣靈敏的搜尋引擎！

核心觀念：什麼是「過濾（Filter）」？

過濾的概念非常直覺：

• 想像你在 Figma 裡有一大堆圖層，你在上方的搜尋框打上「Button」，圖層面板就只會留下名字包含 Button 的元件，其他不相干的全部暫時隱藏。
• 在 JavaScript 的世界裡，陣列有一個內建的 .filter() 方法，它就像是一個嚴格的安檢口：你拿原來的清單進去，設定一個篩選條件，它就會把符合條件的項目挑出來，組成一包全新的乾淨清單！

程式碼怎麼寫？結合輸入框與陣列過濾

我們來看一下怎麼把「輸入框打字（input 事件）」跟「陣列過濾」結合起來：
HTML 結構（加上一個搜尋輸入框）：

<div class="container">
    <h2>會員搜尋系統</h2>
    <!-- 搜尋輸入框 -->
    <input type="text" id="search-input" placeholder="輸入關鍵字搜尋會員...">
    
    <!-- 卡片清單容器 -->
    <div id="user-card-list" class="card-grid"></div>
</div>

JavaScript 搜尋過濾邏輯：

// 假設我們有一包原始的會員資料
let allUsers = []; 

const searchInput = document.querySelector('#search-input');
const cardContainer = document.querySelector('#user-card-list');

// 1. 先把 API 資料抓進來存好
async function initData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    allUsers = await response.json();
    renderCards(allUsers); // 畫面先渲染全部人
}

// 2. 負責把卡片畫到畫面上的小幫手函式
function renderCards(users) {
    cardContainer.innerHTML = ""; // 清空原本的畫面
    users.forEach(user => {
        const card = document.createElement('div');
        card.classList.add('user-card');
        card.innerHTML = `<h3>${user.name}</h3><p>${user.email}</p>`;
        cardContainer.appendChild(card);
    });
}

// 3. 監聽搜尋輸入框的打字事件！
searchInput.addEventListener('input', function(e) {
    const keyword = e.target.value.toLowerCase(); // 取得使用者打的字，並轉成小寫

    // 用 .filter() 篩選出名字裡面包含關鍵字的會員
    const filteredUsers = allUsers.filter(user => {
        return user.name.toLowerCase().includes(keyword);
    });

    // 重新渲染被篩選過後的清單！
    renderCards(filteredUsers);
});

// 執行初始化
initData();

程式碼

1. 'input' 事件：比起 click，input 事件是當使用者在輸入框「每打一個字」就會即時觸發一次，這就是為什麼能做到像 Google 一樣邊打字邊過濾的「即時搜尋」！
2. .includes()：用來檢查字串裡面有沒有包含某段文字，非常適合用來做模糊搜尋。

今日小結

今天我們學會了如何用 .filter() 陣列方法 搭配輸入框的即時監聽，做出了超實用的搜尋過濾功能。使用者體驗直接大升級！

隨著我們離做出一個完整的互動 Web App 越來越近，明天我們要來聊聊前端開發中非常重要的概念——如何把資料好好保存下來的 LocalStorage（本地儲存），讓重新整理網頁後資料也不會消失！