用原生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 是目前唯一不支持的浏览器
原文地址：点此
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
