表單- 搜尋功能: 字串相符

<input> Attributes Notes

<form> Attributes Notes

form MDN)

<form> 沒寫method屬性時，會預設為 method="get" get請求。

• get請求在 <button type="submit">送出表單時，會把輸入框的內容帶到網址上。
• q 是對應 <input name="q">
• <input name="keyword"> 則 url 呈現 keyword=thor

取得url ? 後面的內容

? 後面的內容，稱 查詢字串（queryString）

? 表示後面開始接參數(parameter) = 查詢符(query)

e.g.: ?user=admin&password=123

req.query req物件內的query
會把 ? 後面的內容以物件呈現

應用: 取得 user 搜尋的資料

• 邏輯:
  JSON檔電影清單的title，若有相符user搜尋的字串，就將項目存到變數movies中。
• 方法:
  • 陣列篩選資料，且回傳項目可能大於1個 => array.filter()filter MDN 。
  • 判斷字元有無相同，大小寫需相同 => string.includes() includes()
  • 字元大小寫可能會不同，所以統一小寫 => string.toLowerCase()。toLowerCase( ) MDN

若沒輸入資料，直接送出表單
url 呈現 /search?keyword= 回傳全部電影清單(why?)

功能: 表單送出後，user搜尋的字仍呈現在輸入框內

• <input value="..."> value屬性是可選的，除非屬性類型的值為radio或checkbox。
• <input value="..."> 可設定輸入框的預設值
  

輸入框的預設值 改成 user搜尋的字

keyword 是對應 <input name="keyword">，keyword的值是user搜尋的字。

使用handlebar把 keyword 的值，帶入到 input 標籤中。

input value = {{keyword}} 表單送出後，user搜尋的字仍呈現在輸入框內。