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