- A+
所属分类:HTML5+CSS3
用原生HTML5控件实现输入框自动提示(下拉列表)
示例
输入 "P" 试试?
本文介绍如何使用HTML5的输入列表属性和datalist元素,你可以轻松地设置了一个自动提示的输入框,不需要依赖jQuery或JavaScript。
实现非常简单,添加 list 属性到input字段,然后创建一个datalist元素。 id值与list属性对应即可。
<input list="pasta"> <datalist id="pasta"> <option>Bavette</option> <option>Cannelloni</option> <option>Fiorentine</option> <option>Gnocchi</option> <option>Pappardelle</option> <option>Penne lisce</option> <option>Pici</option> <option>Rigatoni</option> <option>Spaghetti</option> <option>Tagliatelle</option> </datalist>
注* 与label 的 for 属性类似,单击姓名标签,焦点自动移入输入框中:
<label for="username">姓名</label> <input id="username" type="text" />
浏览器支持
DataList控件元素,与list属性支持
Chrome31+
IE10+
Firefox 34+
Opera 26+
Safari 是目前唯一不支持的浏览器

我的微信公众号
我的微信公众号扫一扫