iT邦幫忙

0

Day 17|加入作品搜尋

  • 分享至 

  • xImage
  •  

今天要加入搜尋框,讓使用者輸入部分作品名稱,就能找到相符的收藏。
步驟 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:測試

  • 輸入完整作品名稱。
  • 輸入部分名稱。
  • 使用不存在的名稱。
  • 同時選擇狀態與輸入關鍵字。

圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言