今天要加入搜尋框,讓使用者輸入部分作品名稱,就能找到相符的收藏。
步驟 1:修改電影與遊戲路由
在 Day 16 的兩個路由中,先新增:
keyword = request.args.get("q", "").strip()
接著,在原本套用狀態條件後、ORDER BY 之前,加上:
if keyword: query += " AND title LIKE ?" params.append(f"%{keyword}%")
最後,傳入模板時也加入:
keyword=keyword
例如電影路由的查詢流程會變成:
status = request.args.get("status", "")keyword = request.args.get("q", "").strip()# 建立 SELECT 與 media_type 條件# 若 status 有效,就加入狀態條件# 若 keyword 不為空,就加入 title LIKE 條件# 最後依 id 排序並執行查詢
注意:這裡的 query 和 params 必須沿用 Day 16 路由裡已經建立的變數,不要再另外建立一份空的 SQL。
步驟 2:修改 collection.html
在篩選表單中、狀態下拉選單之前,加入:
搜尋名稱
步驟 3:讓搜尋與篩選同時生效
因為搜尋框和狀態下拉選單都在同一個 GET 表單中,按下按鈕時,兩個參數會一起送出。
例如:
/movies?q=星際&status=watched
這代表搜尋名稱含有「星際」,而且狀態是「已看」的電影。
步驟 4:測試