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>
完整程式碼: