相似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" />

来源：前端开发博客