復(fù)雜的可過濾下拉選框？只需要一個Datalist 標(biāo)簽
大家好，我是 Coco，今天給大家?guī)硪粋€很有意思的標(biāo)簽<datalist>，閱讀本文需要 5 分鐘。
本文將介紹 HTML5 規(guī)范中，比較有意思的一個標(biāo)簽 <datalist>，通過它，我們可以
- 快速構(gòu)建下拉選框
- 快速構(gòu)建可輸入過濾選項的下拉選框
什么是 <datalist>
經(jīng)常制作表單的同學(xué)一定對下拉選框不陌生。
傳統(tǒng)的下拉選框 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>
然而，這僅僅是最基礎(chǔ)的用法。通常而言，業(yè)務(wù)中對一個下拉選框的要求會更多。
其中一項便是當(dāng)選項特別多的時，需要有可搜索過濾的功能，譬如 Element-UI[2] 封裝的 Select 組件，就提供搜索的功能：
其實，HTML5 也原生提供了可以輸入過濾的下拉選框，也就是本文將介紹的 -- <datalist>。
使用 <datalist> 實現(xiàn)輸入過濾的下拉選框
使用 <datalist> 其實非常簡單，它的核心就是提供了可輸入過濾的下拉選框功能。
我們需要利用一個 <input> 標(biāo)簽和 <datalist> 關(guān)聯(lián)起來，簡單的示例如下：
- <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> 內(nèi)的 list 屬性和定義的 <datalist> 關(guān)聯(lián)起來，<input> 內(nèi)的 list 屬性的值為關(guān)聯(lián)的 <datalist> 的 id。
這樣，我們就能直接實現(xiàn)一個可輸入過濾的下拉選框功能：
一看就懂，其實 <datalist> 使用起來還是非常簡單。
<datalist> 使用的局限性
<datalist> 其實成為標(biāo)準(zhǔn)已經(jīng)很久了。然而，大家會發(fā)現(xiàn)這個標(biāo)簽的出鏡率其實并不高。
限制了 <datalist> 被大規(guī)模使用的原因在于其 CSS 樣式無法得到有效的修改，<datalist> 和 <select> 非常類似，很難用 CSS 進(jìn)行高效的設(shè)計。
瀏覽給這類元素定義了默認(rèn)樣式，并且我們無法通過 CSS 去修改它們。最為致命的是，瀏覽器默認(rèn)樣式的表現(xiàn)在不同瀏覽器之間并不一致。這給追求穩(wěn)定，UI 表現(xiàn)一致的業(yè)務(wù)來說，是災(zāi)難性的缺點！
所以我們?nèi)粘Ｖ惺褂玫綐I(yè)務(wù)中的這些復(fù)雜表單元素，通常都是使用了使用非語義元素 <div>、<ul> 等普通標(biāo)簽?zāi)M HTML 結(jié)構(gòu)，使用了 JavaScript 添加行為，再使用 WAI-ARIA 來提供語義。
當(dāng)然，這也不代表它們完全沒有用武之地，在一些非業(yè)務(wù)環(huán)境下，合理使用 <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
