有趣的 H5 标签之 dataList

Question

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

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

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

正文

<dataList>是什么？

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

兼容性：

数据来自于Can I use dataList

搜索提示

在我们的日常开发中，如果我们要实现一个搜索框的搜索提示，实际上我们还要写一堆的事件监听跟数据绑定，但是如果使用 <dataList> ，就不需要那么麻烦，通过它本身的特性，我们是可以免去很多不必要的逻辑代码的，非常方便。

副标题

我们不仅可以设置它的搜索值，也可以藉由 <option> 的 label 属性来设置它的副标题，所以在显示上其实是非常人性化的。

配合 JS

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

词条搜索：<input type="text" name="words" list="words">
<datalist 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