在Web设计中,经常会用到如输入框的自动下拉提示,这将大大方便用户的输入。在以前，如果要实现这样的功能，必须要求开发者使用一些Javascript的技巧或相关的框架进行ajax调用，需要一定的编程工作量。但随着HTML5 的慢慢普及，开发者可以使用其中的新的DataList标记就能快速开发出十分漂亮的 AutoComplete组件的效果

一、datalist标签的使用示例

 
HTML 代码   复制
<!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）的功能，用户将会看见一个下拉列表供其选择。

效果如下

要注意的是IE 10和Opera 中，不需要用户必须输入一个字符才看到下拉的建议列表，而其他浏览器需要用户至少输入一个字符才能看到效果。

二、Datalist中，同样可以为每一个下拉列表选项指定一个value值，如下代码：

 
HTML 代码   复制

<label for="state">State:</label>

 <input type="text" name="state" id="state" list="state_list">

 <datalist id="state_list">

   <option value="AL">Alabama</option>

   <option value="AK">Alaska</option>

   <option value="AZ">Arizona</option>

   <option value="AR">Arkansas</option>

 </datalist>

如果在option中一旦指定了value的值，则用户通过下拉列表选择后，文本框中显示的将会是value的值，如下图：

三、Autocomplete属性

该属性可以设置为on或off，表示输入字段是否应该启用自动完成功能，如下代码所示：

 
HTML 代码   复制

<form>

   <!-- 如果设置了autocomplete属性，则将会继承父元表单元素中autocomplete的值得，   如果也没设置，则默认autocomplete为on，这里没进行任何设置，所以firstName的autocomplete属性为on   -->

    <input type="text" name="firstName">

   <!-- autocomplete设置为on,浏览器将记忆下用户每次输入的值   -->

   <input type="text" name="address" autocomplete="on">   <!-- 设置为off，代表浏览器将不记忆用户在该文本框本次的输入，也不进行建议提醒   -->

   <input type="text" name="secret" autocomplete="off">

</form>

要注意的是，在opera浏览器中，如果设置autocomplete为off，则根本不显示datalist,而在其他浏览器中，是会显示datalist的，只不过失去自动建议提醒功能。

四、什么时候该使用DataList

要注意的是，使用这种下拉的智能提示框也要注意场合。比如在一些要选择不是太多的场景下，使用一般的下拉框其实就可以了。而如果在需要用户在很多数据中去选择，则可以建议使用Datalist下拉建议提示框，因为可以方便用户快速检索去选择。

五、如何应对不支持的浏览器

在写本文的时候，依然只有IE 10,Firefox 4+,Chrome 20+和Opera是支持datalist的，这意味着不少旧版本的浏览器的用户不能使用datalist的功能，但办法总是有的，下面分别介绍一个折衷的办法

datalist中嵌套使用传统的select下拉选择框

一个不错的解决方法，是在提供传统的select下拉文本框的同时，提供给用户能输入普通文本的文本框，如下代码：

 
HTML 代码   复制

<label for="country">Country:</label>

  <datalist id="country_list">

    <select name="country">

      <option value="AF">Afghanistan</option>

      <option value="AX">Åland Islands</option>      <option value="AL">Albania</option>

      <option value="DZ">Algeria</option>

      <option value="AS">American Samoa</option>

      <!-- more -->

    </select>

    If other, please specify:  

</datalist>

  <input type="text" name="country" id="country" list="country_list">

在上面的代码中，在datalist中嵌套了传统的select下拉文本框，而input文本框中依然绑定了datalist，这样的好处是，当在不支持datalist的浏览器中运行的时候会有上图的效果：一边是下拉选择，另外的是可以允许用户输入下拉列表中不存在的记录。而上面的代码如果在支持datalist的浏览器中运行，则是原来的只显示一个datalist的效果。

六、Datalist的限制

当然，Datalist也有限制和不足之处，体现在：

1）不能使用CSS去随意控制或改变其下拉建议列表中的项

2）不能控制datalist的位置

3) 不能控制每次当用户输入多少个字符后，就出现下拉建议列表

4）不能控制大小写敏感，或当匹配什么样的字符就出现下拉建议列表

5）不能将其与服务端的数据源绑定

datalist标签小结的更多相关文章

  1. 【HTML5】<datalist>标签和<select>标签的比较

    <select>标签: 注:该标签定义了下拉列表的实现 <select name = "location"> <option value = &quo ...

  2. HTML5 datalist 标签

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

  3. 课时47.datalist标签（了解）

    1.datalist标签 作用:给输入框绑定待选项 2.datalist格式: <datalist> <option>待选项内容</option> </dat ...

  4. datalist标签 输入框候选

    H5的datalist标签,可以给input输入框提供下拉选择列表,或输入提示功能. 写如下的datalist标签 <datalist id="car"> <op ...

  5. deducmsV5.7 在{dede:datalist}标签中runphp无效的解决办法

    问题: 后台数据是dede:datalist标签展示中,中间有isshow - 是否展示的字段,数据库里存的是0/1:我本来想用{dede:field.isshow runphp='yes'}来着,可 ...

  6. h5 datalist标签获取值

    今天使用datalist标签时,想要获得选中的值,发现使用datalist标签上的val()输出结果一直都是空的 后面改用配套的input获得值 代码如下 <!DOCTYPE html> ...

  7. 运用datalist标签实现用户的搜索列表

    datalist是一个很强大的HTML5标签,支持一般类似于模糊查询,以前都是需要js来做的.下面是一个datalist配合js的小例子,主要是实现用户是否存在,以及添加过程中是否重复的判断. 首先是 ...

  8. html5之datalist标签

    当我看到这个标签的时候,其实我是很愤怒的.因为我以前实现过这个标签的功能,当时是无比的费劲.什么js库呀,function呀.我靠,统统去屎吧,哥有datalist了.那种感觉就好像自己千辛万苦去追去 ...

  9. IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 小结及试题

    小结 HTML标签包含结构标签和基础标签,基础标签是在页面制作最常使用的一些标签.基础标签包含标题标签(<h1>~<h6>).换行标签(<br>).段落标签(< ...

随机推荐

  1. Can't update: no tracked branch No tracked branch configured for branch dev.

    1.git pull 命令出现以下错误 $ git pull There is no tracking information for the current branch. Please speci ...

  2. TypeScript学习笔记之接口类型

    TypeScript的接口,个人理解就是一种约束,包括各种类型的契约或者代码定义上的契约.当然,和java中的用法基本一致,接口可以被继承也可以被实现. 定义一个简单的interface interf ...

  3. 《HelloGitHub》第 21 期

    公告 元旦快乐! <HelloGitHub>第 21 期 兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这是一个面向编 ...

  4. adobe acrobat x pro破解版

    adobe acrobat x pro破解版是Adobe官方出品的PDF文档全能解决方案套件. PDF文件格式是Adobe公司设计的,用其公司开发的Adobe Acrobat X Pro来创建.编辑. ...

  5. spring boot利用swagger和spring doc生成在线和离线文档

    参考博客地址: 在线文档:http://blog.didispace.com/springbootswagger2/ 离线文档:http://www.jianshu.com/p/af7a6f29bf4 ...

  6. jspsmart(保存文件)+poi(读取excel文件)操作excel文件

    写在前面: 项目环境:jdk1.4+weblogic 需求:能上传excel2003+2007 由于项目不仅需要上传excel2003,还要上传excel2007,故我们抛弃了jxl(只能上传exce ...

  7. iOS自定义文字高度添加行间距

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000 } span.s1 { } span.s2 { c ...

  8. C++ 头文件系列(set)

    简介 头文件包含set.multiset两个类模版,这里要描述的概念与map非常相似,甚至连成员函数都几乎一样,所以这篇随笔会很短. set set如果翻译成中文应该是集合的意思,这里更确切的说是唯一 ...

  9. CentOS7 nginx安装

    1 nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. n gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没 ...

  10. su和sudo命令的区别

    一. 使用 su 命令临时切换用户身份 参考 1.su 的适用条件和威力 su命令就是切换用户的工具,怎么理解呢?比如我们以普通用户beinan登录的,但要添加用户任务,执行useradd ,bein ...