OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

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


分享到
分类 JS学习   关键字 JavaScript   发布 ourjs  1425626336265
注意 转载须保留原文链接,译文链接,作者译者等信息。  
用原生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 是目前唯一不支持的浏览器

原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 将BootstrapJS和AngularJS结合使用以及为什么不用jQuery
  2. 让我们写快速的JavaScript,JS性能优化小窍门
  3. CSS Sprite小图片自动合并工具(NodeJS,Python,Java,Ruby)
  4. Session劫持与Session-ID的安全长度
  5. 专为控制打印设计的CSS样式
  6. 通过Web Audio API可视化输出MP3音乐频率波形
  7. 使用Node.JS监听文件夹变化
  8. Sortable极小的可拖放排序分组库;支持AngularJS,React,Meteor
  9. 我为什么不再用Compass写CSS(缺点分析)
  10. 使用Google Analytics跟踪捕获JavaScript,AngularJS,jQuery的在线错误和异常
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. 用原生HTML5控件实现输入框自动提示(下拉列表)
  2. 让我们写快速的JavaScript,JS性能优化小窍门
  3. 通过Web Audio API可视化输出MP3音乐频率波形
  4. 用页面可见性(Page Visibility)API创建用户体验良好的网站
  5. 理解Node.js的事件循环(Event Loop)和线程池
  6. 从一行CSS调试代码中学到的JavaScript知识
  7. 在nodejs中使用Redis缓存和查询数据及Session持久化(Express)
  8. 在ExpressJS(NodeJS)中设置二级域名跨域共享Cookie
  9. 在(Raspberry Pi)树莓派上安装NodeJS
  10. 使用NodeJS将XML解析成JSON及性能比较

 关键字 - JavaScript
  1. 40行JavaScript代码实现的3D旋转魔方动画效果
  2. 使用Javascript将相对路径地址转换为绝对路径
  3. 如何用CSS将select/option文本居中或居右对齐
  4. 给checkbox选择框设置不选中时的值
  5. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  6. JavaScript中怪异的地方
  7. 在JavaScript中创建命名空间的几种写法
  8. JavaScript中的继承,构造函数以及new关键字的作用
  9. 纽约时报使用Html5 WebRTC记录访问者IP地址
  10. 正则中test、exec、match的简单区别,以及括号的用法

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号