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


发布者 ourjs  发布时间 1425626336265
关键字 JS学习  JavaScript 
用原生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 是目前唯一不支持的浏览器





回复 (3)
  • #
  • #1 www.qianqic.com 1441673992445

    话说,超级好用啊!!

  • #2 石毛夕 1450685771609

    直接双击输入框后会自动弹出所设置的所有提醒。这个怎么处理。 看来还是靠js才能完全解决这个问题啊!

  • #3 石毛夕 1450686054326

    用的是火狐43.0.1,不支持。ie10页不支持

微信扫码 立即评论