HTML 的 datalist 標籤

分享:

datalist 是 HTML5 新增的滿有趣的標籤,只要在 input 的欄位設定 list 的名稱:

<input list="fruit" name="fruit" id="fruit">

接著在下面用 datalist 的標籤,並用 id 設定讓 list 指向這邊,並用 option 設定值,便可以製作類似 autocomplete 的效果。

<datalist id="fruit">
  <option value="Apple">
  <option value="Orange">
  <option value="Banana">
  <option value="Mango">
  <option value="Avacado">
</datalist>

完整程式碼:

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。