`
zhouyrt
  • 浏览: 1141610 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML5 datalist 标签

 
阅读更多

以前需要用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)的功能,用户将会看见一个下拉列表供其选择。

效果如下



 



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

 

相关:

https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist

http://caniuse.com/datalist 

  • 大小: 15.4 KB
  • 大小: 9.1 KB
分享到:
评论

相关推荐

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

    HTML5时代则不用了,直接使用datalist标签,直接减少了工作量。如下 复制代码代码如下:&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;HTML5 datalist tag&lt;/title&gt; &lt;meta charset=”utf-8″&gt...

    HTML搜索框模糊匹配下拉显示

    #### 一、HTML5 Datalist标签的应用 HTML5作为一种现代Web技术,提供了许多增强用户体验的新功能。其中,`&lt;datalist&gt;`标签是HTML5新增的一个实用特性,它允许在一个输入框旁边提供一个下拉列表,用于辅助用户输入。...

    Html5新标签datalist实现输入框与后台数据库数据的动态匹配

    HTML5新增的标签datalist实现输入中文/拼音首字母时,自动进入数据库模糊查询,并返回相应的结果,生成datalist,由于在输入框中的输入内容发生变化时,datalist会自动触发下拉框,解决方案非常好,下面通过本文给...

    datalist简单用法

    `&lt;datalist&gt;`元素是HTML5引入的新特性,它并不直接显示在页面上,而是与`&lt;input&gt;`元素配合使用,为输入框提供一组可选的值。当用户在输入框中开始输入时,浏览器会根据已定义的`&lt;option&gt;`元素自动完成建议。 ### 二...

    HTML5&CSS3网页制作:datalist元素.pptx

    `&lt;datalist&gt;`元素是HTML5新增的一个标签,它的主要作用是定义一组预设的选项,这些选项通常与一个`&lt;input&gt;`元素关联,用于用户输入时的参考。用户可以在输入框中自由输入,也可以从列表中选择已定义的选项。这在诸如...

    HTML5标签(chm版)

    此“HTML5标签(chm版)”压缩包提供了关于HTML5标签的详细信息,包括它们的用法和与HTML4的区别,这对于开发者来说是一个宝贵的资源。 HTML5的新标签主要包括结构性元素、表单控制元素以及多媒体支持元素等。结构性...

    html5新增标签和属性

    HTML5 新增标签和属性 HTML5 中新增了许多标签和属性,使得开发者可以更快速地了解和掌握 HTML5 技术,并实现快速上手。这些新增的标签和属性可以帮助开发者快速实现页面布局,提高浏览器的解析速度,并且提供了更...

    HTML 5和 HTML 4的区别点及标签用法

    - **HTML 5**: `&lt;datalist&gt;`标签结合`&lt;input&gt;`元素,提供了一个可选择的数据列表,类似于输入框的下拉列表。 - **HTML 4**: 类似功能通过组合框(combobox)实现,但语法结构不同。 #### 7. `&lt;details&gt;`标签 - **...

    在DataList里编辑和删除数据

    标签:在 DataList 里编辑和删除数据 知识点总结 1. DataList 控件的基本使用 DataList 控件是一个 ASP.NET 中的服务器控件,用于显示和编辑数据。它可以绑定到数据库表或其他数据源,以显示数据集。DataList 控件...

    DataList include DataList.wmv

    此外,标签“asp.net2.0”表明了这个教程是针对ASP.NET 2.0版本的,这意味着其中的示例和最佳实践可能与更新的版本有所差异。尽管ASP.NET已经发展到更高级的版本,如ASP.NET Core,但对旧版本的理解仍然有价值,因为...

    datalist中删除编辑

    在Web开发领域,`datalist`元素是HTML5引入的一个新特性,主要用于提供输入提示,它可以帮助用户在输入框中快速找到并选择建议的值。然而,标题“datalist中删除编辑”似乎指的是如何在使用datalist时处理数据的编辑...

    DataList控件详解

    DataList控件通过`&lt;asp:DataList&gt;`标签在HTML代码中声明。它不直接提供行和列的布局,而是通过模板来定义每个数据项的显示格式。这包括ItemTemplate、AlternatingItemTemplate、HeaderTemplate、FooterTemplate等,...

    datalist用法详解

    `datalist`是HTML5中新增的一个非常有用的元素,它为输入控件提供了一种推荐值的列表,但用户仍然可以自由输入。在本文中,我们将深入探讨`datalist`的基本用法,以及如何实现增、删、改、查操作。 ### datalist...

    HTML5新标签

    HTML5 新标签 HTML5 中引入了许多新的标签,以取代旧的标签,并提供了更好的语义和结构。这些新标签可以让开发者更方便地组织网页结构,提高网页的可读性和可维护性。 1. 文章标签:`&lt;article&gt;` 标签定义了一篇...

    DataList模板

    - **声明和初始化**:在ASP.NET页面中,你可以通过`&lt;asp:DataList&gt;`标签来创建DataList控件,并通过`ID`属性设置其唯一标识。同时,通过`DataSourceID`属性绑定数据源,或者在代码后面动态绑定。 - **数据绑定**:...

    HTML5标签和属性列表.pdf

    HTML5标签和属性列表 HTML5是一种基于XML的标记语言,用于创建网页的结构和内容。 HTML5新增了许多新的标签和属性,提高了网页的可读性、可访问性和互操作性。本文档将对 HTML5 中的标签和属性进行详细的介绍。 ...

    datalist控件中使用DropDownList

    5. **更新数据**:在`ddlCategory_SelectedIndexChanged`事件中,我们可以获取到当前选中的值,然后根据需求更新数据。这可能涉及到与数据库的交互,例如更新对应的数据记录。 ```csharp protected void ...

    DataList滚动显示(2.0)

    DataList的`&lt;asp:DataList&gt;`标签用于定义容器,`&lt;ItemTemplate&gt;`则用于定义每个数据项的模板。同时,你可能需要为DataList添加一个固定大小的容器,如一个div,以便实现滚动效果。 2. **JavaScript和DOM操作**: ...

Global site tag (gtag.js) - Google Analytics