• 技术文章 >web前端 >H5教程

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

    PHP中文网PHP中文网2017-03-27 16:57:00原创1882

    以前需要用JS写一个自动完成组件(Suggest),很费劲。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)的功能,用户将会看见一个下拉列表供其选择。

    20140504164341.jpg

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

    相关文章:

    HTML5每日一练之datalist标签自动补全的使用

    datalist标签

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:HTML5的download属性详细介绍和使用实例_html5教程技巧 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • H5你真的了解吗?(绝对干货)• 在HTML5 Canvas中放入图片和保存为图片的方法_html5教程技巧• 利用简洁的图片预加载组件提升html5移动页面的用户体验 _html5教程技巧• 腾讯技术干货!做一个让人闻风丧胆的HTML5页面• HTML 5标签、属性、事件及兼容性速查表
    1/1

    PHP中文网