那個炒雞有趣的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以上