UDN-企业互联网技术人气社区

板块导航

浏览  : 1880
回复  : 4

[HTML5] html5 datalist标签使用示例(自动完成组件)

[复制链接]
友美C_cup的头像 楼主
发表于 2015-7-15 21:22:19 | 显示全部楼层 |阅读模式

以前需要用JS写一个自动完成组件(Suggest),很费劲。HTML5时代则不用了,直接使用datalist标签,直接减少了工作量。如下


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML5 datalist tag</title>
  5. <meta charset="utf-8">
  6. </head>
  7. <p>
  8. 浏览器版本:<input list="words">
  9. </p>
  10. <datalist id="words">
  11. <option value="Internet Explorer">
  12. <option value="Firefox">
  13. <option value="Chrome">
  14. <option value="Opera">
  15. <option value="Safari">
  16. <option value="Sogou">
  17. <option value="Maxthon">
  18. </datalist>
  19. </body>
  20. </html>
复制代码


datalist提供一个事先定义好的列表,通过id与input关联,当在input内输入时就会有自动完成(autocomplete)的功能,用户将会看见一个下拉列表供其选择。




Chrome/Firefox/Opera和IE10+均已支持,Safari直到版本7仍然不支持。


相关帖子

发表于 2015-8-10 19:42:37 | 显示全部楼层
恩,排版更清晰点就更好了
使用道具 举报

回复

发表于 2015-8-13 20:56:32 | 显示全部楼层
恩,排版更清晰点就更好了
使用道具 举报

回复

发表于 2015-8-14 09:35:09 | 显示全部楼层
纯粹路过,没任何兴趣,仅仅是看在老面孔的份上回复一下
点评 ( 1 ) 收起 / 展开点评

友美C_cup 2015年08月14日 11:21 详情 回复

有空多交流啊

使用道具 举报

回复

友美C_cup的头像 楼主
发表于 2015-8-14 11:21:05 | 显示全部楼层
甘愿寂寞等待 发表于 2015-8-14 09:35
纯粹路过,没任何兴趣,仅仅是看在老面孔的份上回复一下

有空多交流啊
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部