本文将介绍 HTML5 规范中，比较有意思的一个标签<datalist>，通过它，我们可以
- 快速构建下拉选框
- 快速构建可输入过滤选项的下拉选框
什么是<datalist>
经常制作表单的同学一定对下拉选框不陌生。
传统的下拉选框 select，类似于这样：
<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>
一看就懂，其实 <datalist> 使用起来还是非常简单。
<datalist> 使用的局限性
<datalist> 其实成为标准已经很久了。然而，大家会发现这个标签的出镜率其实并不高。
限制了 <datalist> 被大规模使用的原因在于其 CSS 样式无法得到有效的修改，<datalist> 和 <select> 非常类似，很难用 CSS 进行高效的设计。
浏览给这类元素定义了默认样式，并且我们无法通过 CSS 去修改它们。最为致命的是，浏览器默认样式的表现在不同浏览器之间并不一致。这给追求稳定，UI 表现一致的业务来说，是灾难性的缺点！
所以我们日常中使用到业务中的这些复杂表单元素，通常都是使用了使用非语义元素 <div>、<ul> 等普通标签模拟 HTML 结构，使用了 JavaScript 添加行为，再使用 WAI-ARIA 来提供语义。
当然，这也不代表它们完全没有用武之地，在一些非业务环境下，合理使用 <datalist> 还是能够很少代码量的。