专栏首页鱼头的Web海洋那个炒鸡有趣的H5标签 —— <dataList>

那个炒鸡有趣的H5标签 —— <dataList>

  • 作者:陈大鱼头
  • github:KRISACHAN

前言

按照whatwg文档所展示的,截至到本文截稿之前,一共有 113 个HTML标签。

因为所出标签太多,所以我们很难都用得上或者意识到需要用。

但其实也有许多有趣但是我们未曾发掘的标签,本文所要介绍的 <dataList> 便是一个。

正文

<dataList>是什么?

<dataList> 标签一个类似于 <select> 标签一样可以通过包裹 <option> 来表示控件可选值的,唯一不同的就是 <dataList> 需要配合 <input /> 来使用,而且 <dataList> 不表示任何内容,仅作展示。

我们康个栗子:

嗯,就芥末简单。

下面是它的兼容性情况:

(数据来自于Can I use dataList)

搜索提示

在我们的日常开发中,如果我们要实现一个搜索框的搜索提示,实际上我们还要写一堆的事件监听跟数据绑定,但是如果使用 <dataList> ,就不需要那么麻烦,我们再康个栗子:

通过它本身的特性,我们是可以免去很多不必要的逻辑代码的,非常方便。

副标题

我们不仅可以设置它的搜索值,也可以藉由 <option>label 属性来设置它的副标题,再来个栗子:

所以在显示上其实是非常人性化的。

配合JS

我们尝试下利用 <dataList> 来配合 JSONP 写个跨域请求百度搜索API的例子:

代码如下:

词条搜索:<input id="input" type="text" name="words" list="words">
<datalist id="words" style="width: 100px">
    <option label="" value=""></option>
</datalist>
<script>
    'use strict'
    const searchCallback = data => {
        words.innerHTML = ''
        const {
            s
        } = data
        console.log(s)
        const fragment = document.createDocumentFragment()
        s.forEach((res, idx) => {
            const option = document.createElement('option')
            option.label = idx
            option.value = res
            fragment.appendChild(option)
        })
        words.appendChild(fragment)
    }
    input.addEventListener('keyup', ev => {
        const createdScript = document.createElement('script')
        createdScript.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${input.value}&cb=searchCallback`
        document.body.appendChild(createdScript)
        document.body.removeChild(createdScript)
    })
</script>

虽然看起来跟常规的做法没有太大区别,但是利用 <dataList> 我们可以减少搜索框的样式以及定位编写,而且也更符合语义规范,绑定方式也很便捷。

如果是在既定的数据源中进行搜索(例如请求数据缓存的状态),那么我们也可以减少相应filter的代码编写,是不是很方便快捷?

其实HTML里还有很多有趣的东西存在,各位读者感兴趣的话,不妨再挖掘一下,康康还有哪些有意思的标签或者属性可以玩。

参考资料

  1. whatwg datalist
  2. whatwg input
  3. MDN datalist

本文分享自微信公众号 - 鱼头的Web海洋(krissarea),作者:陈大鱼头

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-15

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 像监听页面一样监听戈多的动态

    不知道各位童鞋有木有看过 《等待戈多》 这部出名的荒诞戏剧 。其剧情大概就是 戈戈 与 狄狄 等待 戈多 的过程中发生的一些琐事,一共两幕。等了这么多年,也不知...

    陈大鱼头
  • 写前端代码时请多为残障人士思考之『Accessibility』

    Accessibility,通常缩写为 A11Y ,这缩写取的是首字母 + 中间字母长度 + 结尾字母,译为 “可访问性”。这是一种让尽可能多的人访问我们所开发...

    陈大鱼头
  • 前端进阶之setTimeout 为什么会出现误差?

    讲到线程,那么肯定也得说一下进程。其实在本质上,两个名词都是 CPU 工作时间片的一个描述。

    陈大鱼头
  • 【DB笔试面试701】在Oracle中,如何让普通用户可以杀掉自己用户的会话?

    普通用户想要杀掉会话必须要具有ALTER SYSTEM的权限,但是由于该权限过大,用户可能使用该权限错杀其他用户的会话,所以,有没有其它办法可以实现该功能呢?该...

    小麦苗DBA宝典
  • 恶意软件蹿行,捷克COVID-19测试中心惨遭攻击

    世界各地的医院都在应对日益增长的COVID-19病毒感染浪潮,但是,网络犯罪活动毁掉了欧洲一个测试中心的努力。

    FB客服
  • 【从0到1学习边缘容器系列】之 边缘应用管理

    陈凯悦,腾讯容器技术研发工程师,腾讯云TKE后台研发,腾讯云边缘容器核心开发成员。

    灵雀云
  • 【DB笔试面试674】在Oracle中,V$SESSION_LONGOPS视图的作用是什么?

    在Oracle 11g之前的版本,长时间运行的SQL可以通过监控V$SESSION_LONGOPS来观察,当某个操作执行时间超过6秒时,就会被记录在V$SESS...

    小麦苗DBA宝典
  • 【技术综述】你真的了解图像分类吗?

    图像分类是计算机视觉中最基础的任务,基本上深度学习模型的发展史就是图像分类任务提升的发展历史,不过图像分类并不是那么简单,也没有被完全解决。

    abs_zero
  • 不要太信任云:不仅仅只是关乎安全的原因

    原文地址:https://dzone.com/articles/dont-trust-the-cloud-why-its-about-more-than-jus...

    周汪洋
  • 搭建自己的脚手架

    最近接手了一个内部配置运营平台,大概了解了代码结构之后,第一波优化就是搭建了一套脚手架。

    暂七师黑管手

扫码关注云+社区

领取腾讯云代金券