datalist利与弊
2018-09-28 本文已影响0人
孙静静
最近发现一个特别好用的标签，html5新出的标签datalist，有时候工作会用到在input框中搜索，出现下拉框的情况，如果自己写，要写一个搜索功能，这里这个标签可以写出效果。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
列表：<input type="text" list="mydata" placeholder="热门电影排行" />
<datalist id="mydata">
<option label="Top1" value="让子弹飞">
<option label="Top2" value="非诚勿扰2">
<option label="Top3" value="大笑江湖">
<option label="Top4" value="赵氏孤儿">
<option label="Top5" value="初恋这件小事">
</datalist>
</div>
</body>
</html>
浏览器出现：
鼠标放在input中，则会出现下拉效果，
（原谅我用手机拍的，因为鼠标在桌面上一点击，下拉框 自动消失，没法截图）
搜索：
效果还是很好的，这么完美功能的标签，居然有个css样式的bug，真是让人悲伤不已，第一，除了浏览器兼容问题（可参观相关文档解决，并且各个浏览器样式会有不同），第二就是当下拉框内容太多而input框处于浏览器上下 差不多居中的时候不能自适应出现滚动条，以至于上面没显示完的都看不到
并且目前来看，datalist是不能随便定义样式的。
