今天做搜尋功能，在篩選分類旁邊加一個搜尋框，輸入關鍵字就能找出標題包含它的待辦事項。

今天做的事
後端把category和q兩個條件組合起來，有帶哪個就加哪個，用AND串接：

const conditions = [];
const params = [];

if (category) {
  conditions.push('category = ?');
  params.push(category);
}
if (q) {
  conditions.push('title LIKE ?');
  params.push(`%${q}%`);
}

let sql = 'SELECT * FROM todos';
if (conditions.length > 0) {
  sql += ' WHERE ' + conditions.join(' AND ');
}

前端用URLSearchParams組出網址，並加上防抖，使用者停止輸入0.3秒後才會送出請求。

觀察

• 使用者輸入的內容一律透過?放進params，不直接拼進SQL字串，這叫參數化查詢。我故意在搜尋框輸入單引號'，程式沒有報錯，只是顯示空清單。如果是用字串拼接，這個單引號會破壞SQL語法，這就是SQL Injection的原理
• LIKE '%關鍵字%'前後的%代表前面後面可以有任何字，所以搜尋作業可以找到完成 Web 原理作業。%要加在參數的值裡面，不是寫在SQL裡
• 防抖用setTimeout和clearTimeout實現：每次輸入都取消上一個計時，只有停下來超過300毫秒才送出請求。打開Network分頁，打鐵人賽三個字只會看到一筆請求，不防抖的話會有三筆
• URLSearchParams會自動處理中文和特殊字元的編碼，不用再手動寫encodeURIComponent

心得
搜尋看起來只是一個輸入框，背後卻牽涉到安全（SQL Injection）和效能（防抖）兩件事。這兩件事如果不特別去測，平常使用根本不會發現有問題，但真正上線之後就可能出事。
這五天把待辦清單的基本功能補得很完整了，接下來要進入另一個大主題：登入系統，讓每個人只看得到自己的待辦事項。