HTML <datalist> input 欄位自動完成，輸入資料選擇清單

<datalist> 標籤 (tag) 用來建立一組資料清單 (list of options)，來和 <input> 欄位結合，在 <input> 欄位會出現一個下拉選單，提供給使用者可以從資料清單中直接選擇一個值，作用很像是 <input> 欄位的自動完成 (autocomplete) 功能。

建立輸入選擇清單的方式是：

1. 用 <option> 標籤在 <datalist> 裡面建立資料選項
2. <datalist> 標籤上需要設定一個 id 屬性
3. 在 <input> 標籤上設定一個 list 屬性，將 list 的值設定為要關聯的 datalist id

舉個例子：

<label>請問你使用什麼瀏覽器:
<input list="browsers" name="myBrowser"></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

顯示結果：

點上方輸入框試試，如果支援 datalist 的瀏覽器會出現一個下拉選單。

當使用者一邊在 <input> 輸入框中打字時，瀏覽器也會自動過濾只出現 datalist 中符合字串的 option，這在當資料筆數很多時，可以很方便的幫使用者快速找到對應的選項，會大大提升使用體驗。