復雜的可過濾下拉選框？只需要一個Datalist 標簽
大家好，我是 Coco，今天給大家帶來一個很有意思的標簽<datalist>，閱讀本文需要 5 分鐘。
本文將介紹 HTML5 規范中，比較有意思的一個標簽 <datalist>，通過它，我們可以
- 快速構建下拉選框
- 快速構建可輸入過濾選項的下拉選框
什么是 <datalist>
經常制作表單的同學一定對下拉選框不陌生。
傳統的下拉選框 select[1]，類似于這樣：
- <label for="pet-select">Choose a pet:</label>
- <select name="pets" id="pet-select">
- <option value="">--Please choose an option--</option>
- <option value="dog">Dog</option>
- <option value="cat">Cat</option>
- <option value="hamster">Hamster</option>
- <option value="parrot">Parrot</option>
- <option value="spider">Spider</option>
- <option value="goldfish">Goldfish</option>
- </select>
然而，這僅僅是最基礎的用法。通常而言，業務中對一個下拉選框的要求會更多。
其中一項便是當選項特別多的時，需要有可搜索過濾的功能，譬如 Element-UI[2] 封裝的 Select 組件，就提供搜索的功能：
其實，HTML5 也原生提供了可以輸入過濾的下拉選框，也就是本文將介紹的 -- <datalist>。
使用 <datalist> 實現輸入過濾的下拉選框
使用 <datalist> 其實非常簡單，它的核心就是提供了可輸入過濾的下拉選框功能。
我們需要利用一個 <input> 標簽和 <datalist> 關聯起來，簡單的示例如下：
- <label>Choose a browser from this list:
- <input list="browsers" name="myBrowser" /></label>
- <datalist id="browsers">
- <option value="Chrome">
- <option value="Firefox">
- <option value="Internet Explorer">
- <option value="Opera">
- <option value="Safari">
- </datalist>
上述代碼通過了 <input> 內的 list 屬性和定義的 <datalist> 關聯起來，<input> 內的 list 屬性的值為關聯的 <datalist> 的 id。
這樣，我們就能直接實現一個可輸入過濾的下拉選框功能：
一看就懂，其實 <datalist> 使用起來還是非常簡單。
<datalist> 使用的局限性
<datalist> 其實成為標準已經很久了。然而，大家會發現這個標簽的出鏡率其實并不高。
限制了 <datalist> 被大規模使用的原因在于其 CSS 樣式無法得到有效的修改，<datalist> 和 <select> 非常類似，很難用 CSS 進行高效的設計。
瀏覽給這類元素定義了默認樣式，并且我們無法通過 CSS 去修改它們。最為致命的是，瀏覽器默認樣式的表現在不同瀏覽器之間并不一致。這給追求穩定，UI 表現一致的業務來說，是災難性的缺點！
所以我們日常中使用到業務中的這些復雜表單元素，通常都是使用了使用非語義元素 <div>、<ul> 等普通標簽模擬 HTML 結構，使用了 JavaScript 添加行為，再使用 WAI-ARIA 來提供語義。
當然，這也不代表它們完全沒有用武之地，在一些非業務環境下，合理使用 <datalist> 還是能夠很少代碼量的。
參考資料
[1]select:
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/select
[2]Element-UI:
https://element.eleme.io/#/zh-CN/component/select
