大家好，我是Coco，今天给大家带来一个很有意思的标签。阅读本文需要5分钟，请花5分钟阅读本文。本文将介绍HTML5规范中一个有趣的标签。通过它，我们可以，通过它，我们可以快速构建一个下拉框快速构建一个可以输入过滤选项的下拉框。什么是经常做表格的同学一定对下拉框不陌生。传统的下拉选择框select[1]类似这样：Chooseapet:--请选择一个选项--狗猫仓鼠ParrotSpiderGoldfish不过，这只是最基本的用法。一般来说，业务中对下拉框的要求比较多。Oneofthemisthatwhentherearetoomanyoptions,itisnecessarytohaveasearchableandfilteringfunction.比如Element-UI[2]封装的Select组件提供了一个搜索功能：其实HTML5也原生提供了一个可以输入和过滤的下拉选择框，这就是本文要介绍的--<数据列表>。.使用实现输入过滤的下拉框使用其实很简单，其核心就是提供下拉框的输入过滤功能。我们需要使用一个标签来关联。一个简单的例子如下：其实很简单。它的核心是提供一个可以输入和筛选的下拉框功能。从这个列表中选择浏览器：是关联的，其中list属性的值为关联的id。上述代码将中的list属性与定义的关联起来，中list属性的值为关联的的id。这样我们就可以直接实现一个可以输入过滤的下拉框功能：一看就明白了，但是使用起来还是很简单的。使用起来还是很简单的。使用限制实际上已经成为很长一段时间的标准。不过大家会发现，这个标签的出镜率其实并不高。使用的限制实际上已经成为很长一段时间的标准。不过大家会发现，这个标签的出镜率其实并不高。限制大规模使用的原因是它的CSS样式不能被有效修改。与非常相似，很难用CSS高效设计。浏览为这些元素定义了默认样式，我们无法通过CSS修改它们。最致命的是浏览器默认样式的表现在不同的浏览器之间是不一致的。这对于追求稳定和一致的UI性能的企业来说是灾难性的短板！因此，我们在日常业务中使用的这些复杂的表单元素，通常都是使用普通的标签如非语义元素、来模拟HTML结构，使用JavaScript来添加行为，然后使用WAI-ARIA来提供语义.当然，这并不意味着它们完全没有用。在一些非业务环境下，合理使用还是可以减少代码量的。它之所以被大规模使用，是因为它的CSS样式不能被有效修改。很像，用CSS很难高效设计。浏览为这些元素定义了默认样式，我们无法通过CSS修改它们。最致命的是浏览器默认样式的表现在不同的浏览器之间是不一致的。这对于追求稳定性和一致的UI性能的业务来说是一个灾难性的缺点！因此，我们在日常业务中使用的这些复杂的表单元素通常使用非语义元素等普通标签来模拟HTML结构，JavaScript用于添加行为，WAI-ARIA用于提供语义。当然，这并不意味着它们完全没有用。在一些非业务环境下，合理使用还是可以减少代码量的。最后，本文到此结束，希望对大家有所帮助：）有什么问题或者建议可以多交流，原创文章，写的有限，缺乏天赋和学习，如有不妥之处在文章中，请告诉我。参考文献[1]选择：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/select[2]Element-UI：https://element.eleme.io/#/zh-CN/component/select参考文献[1]select：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/select[2]Element-UI：https://element.eleme.io/#/zh-CN/组件/选择
复杂的可过滤下拉菜单？你只需要一个Datalist标签相关文章
