---
tags: 30 天軟體工程師體驗營｜2025
---

# 🏅 JS 任務 Day23 - 綜合運用練習 - 搜尋功能

即時文章標題搜尋功能，可用於幫助使用者快速找到他們感興趣的文章內容
提升網站的可用性與使用者體驗（UX）
適合應用在部落格、新聞網站、教學平台等有大量文章列表的網頁
使用者只要在輸入框中輸入關鍵字，系統就會即時篩選出符合關鍵字的標題，不需要重新整理頁面或按搜尋鍵，操作直覺、快速又方便。

## toLowerCase() — 字串轉小寫
toLowerCase() 是 JavaScript 中 String 物件的方法，用來將字串轉換成全部小寫字母。

const word = 'Hello WORLD';
console.log(word.toLowerCase()); // 輸出: 'hello world'

## includes() — 檢查是否包含某子字串
includes() 是 String 和 Array 都有的方法，用來判斷某字串（或陣列）中是否包含特定的子字串（或元素）。

### 字串範例：

const sentence = 'I love JavaScript!';
console.log(sentence.includes('Java')); // true
console.log(sentence.includes('java')); // false（區分大小寫）

### 陣列範例：

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('banana')); // true

題目
---
請複製此[ CodePen 模板](https://codepen.io/yen-kg/pen/raaOWGE)，完成搜尋的功能。如下圖所示：

## 回報流程

1. 將答案貼在 CodePen 並複製 CodePen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!--解答：
const searchInput = document.getElementById('searchInput');
const articleItems = document.querySelectorAll('.article-item');

searchInput.addEventListener('input', function () {
const keyword = this.value.toLowerCase();

articleItems.forEach(item => {
const title = item.textContent.toLowerCase();
if (title.includes(keyword)) {
item.classList.remove('hidden');
} else {
item.classList.add('hidden');
}
});
});
-->

回報區
---

| 報數 | Discord 名字 | CodePen／其他回饋 |
|:----:|:---------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | 4chan | [CodePen](https://codepen.io/ijuolaqc-the-looper/pen/ogXgVgr?editors=1010) |
| 2 | dean | [CodePen](https://codepen.io/ch933114/pen/dPoPrQM?editors=1011) |
|3|Saika|[Codepen](https://codepen.io/saika4501/pen/WbvbmaJ?editors=1111)|
| 4 | Esther | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/ogXgOYZ) |
| 5 | B | [CodePen](https://codepen.io/Babel777/pen/KwpwLwd) |
| 6 | ying | [CodePen](https://codepen.io/Lara-Lin/pen/WbvbBvN) |
| 7 | 7Lun| [Day23-CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/myJJPRv) |
| 8 | WEIWEI | [CodePen](https://codepen.io/weiwei93/pen/MYwYxOq) |
|9|蛋殼|[Codepen](https://codepen.io/weybrian/pen/MYwwmwy)
| 10 | oyll | [CodePen](https://codepen.io/dizzydog-rgb/pen/KwppqPq?editors=0011) |
| 11 | wei_0982 | [CodePen](https://codepen.io/nico-lai/pen/WbvrdeO) |
| 12 | 力文 | [CodePen](https://codepen.io/liwenchiou/pen/dPoMMZR?editors=0010) |
| 13 | jingle0900 | [CodePen](https://codepen.io/EvaLi0472/pen/raVeYWy) |
| 14 | Leonard | [CodePen](https://codepen.io/hyyfjqra-the-sans/pen/QwbEeqd?editors=1011) |
| 15 | kelsonhouse | [Codepen](https://codepen.io/Kelson-House/pen/ZYGKroK?editors=1011)|
| 16 | ninii | [Codepen](https://codepen.io/niiniiii/pen/MYwmPQJ)|
| 17 | William Hsieh | [CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/NPqgrdb?editors=1011) |
| 18 | Jessie_Yu | [Jessie_Yu 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/gbpGadO?editors=1111)|
| 19 | mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/qEdpzBZ) |
| 20 | Chuang | [CodePen](https://codepen.io/uidoytjq-the-solid/pen/zxGLmwN?editors=1011) |
| 21 | 叮咚| [CodePen](https://codepen.io/pinchieh-lin/pen/jEbmPba) |

<!-- 【快速複製】
| 00 | user | [CodePen]() |

-->