那个炒鸡有趣的H5标签 ——

• 做者：陈大鱼头
• 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

后记

若是你喜欢探讨技术，或者对本文有任何的意见或建议，很是欢迎加鱼头微信好友一块儿探讨，固然，鱼头也很是但愿能跟你一块儿聊生活，聊爱好，谈天说地。 鱼头的微信号是：krisChans95 也能够扫码关注公众号，订阅更多精彩内容。 公众号窗口回复『 前端资料 』，便可获取约 200M 前端面试资料，不要错过。