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

由于所出标签太多，因此咱们很难都用得上或者意识到须要用。 但其实也有许多有趣可是咱们不曾发掘的标签，本文所要介绍的 即是一个。

<dataList>是什么？

标签一个相似于 标签同样能够经过包裹 来表示控件可选值的，惟一不一样的就是 须要配合 来使用，并且 不表示任何内容，仅做展现。 咱们康个栗子：

嗯，就芥末简单。 下面是它的兼容性状况：

搜索提示

在咱们的平常开发中，若是咱们要实现一个搜索框的搜索提示，实际上咱们还要写一堆的事件监听跟数据绑定，可是若是使用 ，就不须要那么麻烦，咱们再康个栗子：

经过它自己的特性，咱们是能够免去不少没必要要的逻辑代码的，很是方便。 副标题 咱们不只能够设置它的搜索值，也能够藉由 的 label 属性来设置它的副标题，再来个栗子：

因此在显示上实际上是很是人性化的。 配合JS 咱们尝试下利用 来配合 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>

 

虽然看起来跟常规的作法没有太大区别，可是利用 咱们能够减小搜索框的样式以及定位编写，并且也更符合语义规范，绑定方式也很便捷。 若是是在既定的数据源中进行搜索（例如请求数据缓存的状态），那么咱们也能够减小相应filter的代码编写，是否是很方便快捷？

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

总结

你们有什么要说的，欢迎在评论区留言

对了，小编为你们准备了一套2020最新的web前端资料，须要点击下方连接获取方式

一、点赞+评论（勾选“同时转发”）

学习前端，你掌握这些。二线也能轻松拿8K以上