那个炒鸡有趣的H5标签 —— <dataList>
那个炒鸡有趣的H5标签 —— <dataList>
陈大鱼头
发布于 2020-06-19 14:42:06
发布于 2020-06-19 14:42:06
- 作者：陈大鱼头
- 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里还有很多有趣的东西存在，各位读者感兴趣的话，不妨再挖掘一下，康康还有哪些有意思的标签或者属性可以玩。
参考资料
- whatwg datalist
- whatwg input
- MDN datalist
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-06-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录