专栏首页复盘总结文章集合DataList:HTML5中的input输入框自动提示利器

DataList:HTML5中的input输入框自动提示利器

DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果。它是HTML5里新增的一个非常有用的元素。

DataList的表现很像是一个Select下拉列表,但它只是提示作用,并不限制用户在input输入框里输入什么。 HTML5 Datalist的语法其实跟select下拉列表的语法几乎完全一样,非常的简单!

<label for="country_name">国家 : </label><input id="country_name" name="country_name" type="text" list="country" />
<datalist id="country">
   <option value="Afghanistan 阿富汗">
   <option value="Albania 阿尔巴尼亚">
   <option value="Algeria 阿尔及利亚">
   <option value="Andorra 安道尔共和国">
   <option value="Angola 安哥拉">
</datalist>

需要注意的是,input输入框的list属性值是datalist的id,这样datalist才能和input输入框关联起来,在之前介绍range类型时曾见到提到过它。 datalist自身并不显示,只在需要配合input输入时才会自动显示出来。

下面我们来看一个实际例子,在下面的输入框里,任意输入几个字母,datalist就会提示给你包含这几个字符的英文国家名称。

国家名称(英文)

如果你的浏览器太古老,看不到上面的效果,下面的这张图片可以让你过一下眼瘾。

这个例子用的是英文,但中文其实也一样。你不妨自动动手试一下。非常的简单,以前这样的效果基本上只能用讲Javascript实现,需要你有相当的javascript基本功,而现在,感谢HTML5,只需要纯HTML就能达到这样的神奇效果。

Datalist跟JavaSript比起来也有一些短板,比如当数据量很大时,比如上千条信息,这样的数据量不宜全部都写到页面里,这时,使用Javascript动态加载会提高效率。但对于普通的应用,Datalist是完全够用的。你认为呢?

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • java对象与json对象间的相互转换

    JSONObject jsonObject = JSONObject.fromObject(jsonStr);

    ZhangXianSheng
  • AndroidStudio生成jar、so、aar以及上传远程库jcenter

    各位安卓开发的各位小伙伴,大家肯定要用到很多类库。 如果,我们有一些特殊需求,就是一个项目的某个模块的功能给其他项目使用。我们直观的是想到依赖module呗。...

    ZhangXianSheng
  • 常用的Java开发自定义工具类UtilsTools

    日常开发中经常会遇到一些常用频繁的数据类型转换、日期格式转换、非空校验、避免重复造轮子写代码一般我们一般会封装一个常用的Utils开放工具类;

    ZhangXianSheng
  • python之day1

      初学python会有学python2还是python3的困惑,因为现在公司的实际环境下大部分还是用2.7编写的代码,python3.X又向下不兼容2.X,我...

    py3study
  • Vue基础:数据绑定

    注意:当v-bind:style使用需要特定前缀的CSS属性时,如transform,Vue.js会自动侦测并添加相应的前缀。

    奋飛
  • 无联动picker组件

    省市区联动这种插件应该很多人用过,在我第一次写这种功能的时候,第一时间就是找插件,尤其是移动端,对当时的我来说从来没有想过自己写。

    wade
  • 【剑指offer题解】二维数组中的查找

    如果你和我一样是个算法菜鸡,那么最推荐的是先把剑指offer的题目搞明白,其次再去刷LeetCode等习题,这样对于面试突击非常有用,因为面试官最常考的算法题都...

    后端技术漫谈
  • 什么是ORM?

    一、ORM简介 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不...

    步履不停凡
  • des加解密,双向通讯

    用户1437675
  • Flutter中利用MapCache加sqflite实现一个伪LRU三级缓存

    在做flutter应用的时候,遇到了一个问题,纯粹属于自己给自己加戏,问题是什么呢?我的app首页是一个列表,目前每次进应用,都是通过网络拿到新的列表,所以,如...

    brzhang

扫码关注云+社区

领取腾讯云代金券