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

前言

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

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

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

正文

<dataList>是什么?

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

我们康个栗子:

https://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/css/dataList/2.gif

嗯,就芥末简单。

下面是它的兼容性情况:

https://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/css/dataList/1.png

(数据来自于Can I use dataList

搜索提示

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

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

副标题

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

https://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/css/dataList/4.gif

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

配合JS

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

https://fish-pond-1253945200.cos.ap-guangzhou.myqcloud.com/img/css/dataList/5.gif

代码如下:

词条搜索:<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

后记

如果你喜欢探讨技术,或者对本文有任何的意见或建议,非常欢迎加鱼头微信好友一起探讨,当然,鱼头也非常希望能跟你一起聊生活,聊爱好,谈天说地。 鱼头的微信号是:krisChans95 也可以扫码关注公众号,订阅更多精彩内容。 公众号窗口回复『 前端资料 』,即可获取约 200M 前端面试资料,不要错过。

加入前端鱼塘 扫描二维码回复 加群 学习