相似select下拉選擇框同時又支持手動輸入的元素 datalist 介紹。

有時候咱們會有這樣的需求，經過使用下拉菜單給用戶必定的選擇範圍，同時又能夠使用戶在找不到選擇項的時候手動輸入。這個時候咱們就須要用到html5的datalist屬性了。

datalist包含<option>元素，相似於<select>元素，而且它是附加在<input type="text"/>上的list。

代碼以下：

<label>愛好：</label>
<input type="text" id="txt_ide" list="ide" />
                <datalist id="ide">
                   <option value="籃球" label="球類"/>
                   <option value="跑步"/>
                   <option value="爬山"/>
                   <option value="繪畫"/>
                   <option value="舞蹈"/>
                </datalist>

　　list的值指向datalist的id。同時option還支持添加label屬性。效果以下：

根據官方W3C的文檔，datalist還能夠用於下面這些·

• <input type="text" />
• <input type="url" />
• <input type="tel" />
• <input type="color" />

來源：前端開發博客