用原生HTML5控件实现输入框自动提示（下拉列表补全）功能

用原生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 是目前唯一不支持的浏览器