最近一个项目需要用到类似淘宝,百度搜索时的自动检索方案。自然想到了使用datalist标签。但是遇到一个bug,经过两天研究。小有结果给大家分享下~~

首先看bug吧!~

因为项目最开始测试就是用360的极速做的,当时就发现了这个bug。本来以为很简单分分钟搞定~

失败测试一:最开始想到的就是在datalist外面加div然后限制div的高度用overflow:auto让下拉框自动生成滚动条。

结果:datalist并不给面子,依然我行我素的超过屏幕。(ps:想用div框我,门儿都没有~~~~~~~~~)

于是乎开始疯狂的搜度娘,博客园,然而答案几乎没有,貌似大家都没有这个问题?

失败测试二:琢磨来琢磨去还是只能用div想办法,想到用div把整个内容都框起来包括input text,datalist,option都框起来整个加overflow来限制。

结果:

看到这个结果都疯了。。。。。。。。。。还是圈不住这天杀的datalist下拉框。

中途无奈准备换个脚本autocomplete来处理,autocomplete是js用ul li生成的下拉框很好的避免了这个bug。此处就不做详解,感兴趣的朋友可以搜下autocomplete。

。。。。。

不扯远了,继续来扯datalist。被datalist折磨了1整天,我才想着用别的浏览器也试试,是不是都这样。

结果,我惊呆了。。。。。

下面上图大家看。

360极速浏览器

IE浏览器(IE11测试)

chrome浏览器

火狐浏览器

本子配置不好就装了这么多浏览器,大家如果测试了其他浏览器欢迎留言。

测试完发现datalist标签依然存在很大的问题,最蛋疼的居然拿div还限制不了。chrome的使用群体也不少,w3c能考虑下chrome的感受吗?连IE都兼容了。还是说是Google的问题?哎~~~~蛋疼。

最新文章

  1. 免安裝、免設定的 Hadoop 開發環境 - cloudera 的 QuickStart VM
  2. MongoDB学习笔记~为IMongoRepository接口添加了增删改方法,针对官方驱动
  3. CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)
  4. International Conference in 2014
  5. 2014 网选 5012 Dice(bfs模板)
  6. 【WPF】Winform调用WPF窗体注意事项
  7. Ci分开配置网站前台后台的方法
  8. 多线程更新已排序的Datagridview数据,造成数据错位
  9. JavaScript DOM省市自适配select菜单
  10. HDU ACM 1068 最大独立集
  11. MVC 分页1 标准的url分页
  12. Java1.5泛型指南中文版(Java1.5 Generic Tutorial)
  13. Android布局及属性归总(查询用)
  14. File FileStream StreamWriter StreamReader文件读写操作方法
  15. maven生成项目慢解决办法
  16. metasploit安装,按官网说明
  17. js函数式编程——蹦床函数
  18. 【Python54.1--豆瓣登录】
  19. web.xml之context-param,listener,filter,servlet加载顺序及其周边
  20. String对象的match方法

热门文章

  1. ASP.NET MVC 之自定义HtmlHelper
  2. Memcache所有方法及参数详解
  3. 【PHP面向对象(OOP)编程入门教程】8.构造方法__construct()与析构方法__destruct()
  4. bpl 包的编写和引用
  5. linux 硬件信息
  6. C++学习6
  7. 使用datatable 将测试数据与业务分离
  8. UIDatePicker 之显示中文 年月日
  9. Android学习手记(6) TabActivity和TabHost
  10. 并发情况下synchronized死锁
  11. Java实现 Base64、MD5、MAC、HMAC加密(转)
  12. 关于ORACLE通过file_id与block_id定位数据库对象遇到的问题的一点思考
  13. Java平台与.Net平台在服务器端前景预测
  14. Javascript中NaN、null和undefinded的区别
  15. Oracle查询字符串数据进行排序,以及去重复
  16. 大湾区联动:广州深圳助力东莞.NET俱乐部首次线下活动
  17. Asp.net mvc 项目返回Json
  18. nginx中的epoll模型
  19. 记一次Java Core Dump分析过程
  20. Python常用模块--string