那個炒雞有趣的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 前端面試資料，不要錯過。