HTML 建立可以自動完成的輸入視窗

平時在建立下拉式選單(select)時有時候會遇到需要可以輸入內容並選擇的情況，但在下拉式選單中並不能輸入。
這時候可以使用 datalist 這個 html 原生標籤，他會搭配 input ，在使用者輸入時自動依照輸入的內容提供 datalist 內的選項供使用者選擇。缺點是提示的樣式是依照瀏覽器自訂。

建立 datalist 時需要指定 id，之後只要在 input 中將 list 設定為 datalist 的 id 即可

    
<input list="fruit" type="text"/>
<datalist id="fruit">
    <option value="Apple">Apple</option>
    <option value="Banana">Banana</option>
    <option value="Orange">Orange</option>
    <option value="Grape">Grape</option>
</datalist>
    

實際顯示樣式:
水果: