- A+
所属分类：HTML5+CSS3
用原生HTML5控件实现输入框自动提示(下拉列表)
示例
输入 "P" 试试?
本文介绍如何使用HTML5的输入列表属性和datalist元素，你可以轻松地设置了一个自动提示的输入框，不需要依赖jQuery或JavaScript。
实现非常简单，添加 list 属性到input字段，然后创建一个datalist元素。 id值与list属性对应即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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 属性类似，单击姓名标签，焦点自动移入输入框中:
1 2 | <label for="username">姓名</label> <input id="username" type="text" /> |
浏览器支持
DataList控件元素，与list属性支持
Chrome31+
IE10+
Firefox 34+
Opera 26+
Safari 是目前唯一不支持的浏览器
我的微信公众号
我的微信公众号扫一扫
