用原生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 是目前唯一不支持的浏览器
原文地址：点此
正文到此结束
热门推荐
相关文章
近期评论
-
你这基本没有更新呀，最近文章显示还是2019年的文章。不符合要求哈
-
关键词：慕云博客 链接：https://www.lilun.me 描述：分享原创文字的个人博客
-
-
-
可以提供一下源码吗
-
不是商业站，鸡娃学习笔记
-
-
-
-
听他们说很厉害的样子
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
