博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5 datalist 标签
阅读量:6612 次
发布时间:2019-06-24

本文共 563 字,大约阅读时间需要 1 分钟。

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

<!DOCTYPE html>

<html>
 <head>
    <title>HTML5 datalist tag</title>
    <meta charset="utf-8">
 </head>
    <p>
        浏览器版本:<input list="words">
    </p>
    <datalist id="words">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
        <option value="Sogou">
        <option value="Maxthon">
    </datalist>
 </body>
</html>

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

效果如下

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

转载地址:http://frxso.baihongyu.com/

你可能感兴趣的文章
DBMS_STATS.GATHER_TABLE_STATS
查看>>
Java-单机版的书店管理系统(练习设计模块和思想_系列 五 )
查看>>
嵌入式 详解udev
查看>>
《C程序员:从校园到职场》出版预告(2):从“百花齐放”到“一枝独秀”
查看>>
Network Monitor 查询命令和MySQL命令
查看>>
好“戏”刚刚开幕 云计算逐步被认可
查看>>
云安全:这也是需要花大钱去建设的部分
查看>>
以全局产业观领航智慧城市建设
查看>>
5G网络不止能1秒下一部电影,它还能够…
查看>>
中国电信集采终端6700万部 金额达1070亿元
查看>>
2016年的十个数据中心故事
查看>>
《Java并发编程的艺术》一一3.3 顺序一致性
查看>>
《CCNP SWITCH 300-115认证考试指南》——导读
查看>>
《设计之外——比修图更重要的111件事》—第1部分3 虚心学习
查看>>
Solaris Studio 12.4 Beta update 7/2014
查看>>
EVCache —— Netflix 的分布式内存数据存储
查看>>
《用友ERP-U8(8.72版)标准财务模拟实训》——1.4 系统管理注册和导入演示账套...
查看>>
《Node.js区块链开发》一3.6 总结
查看>>
《UG NX8.0中文版完全自学手册》一2.8 布尔运算
查看>>
移动阅读时代“长文章”生存状态调查
查看>>