HTML-datalist-1.1

    有时候select已经不能满足我们的需求了。

    有时候因为框架的原因，框架内的select会要求我们固定是下拉框的选项。但很多时候我们需要根据用户的选择，去数据库中查询我们的数据值，并返回前端，动态生成下拉框的内容。这时候在不影响系统的前提下，我们会选择动态生成datalist去动态展示数据。

    另一方面，select会一口气展示所有的选项，但我们希望根据用户输入的内容，选择性的展示选项，这时候我们也会使用datalist。

    首先我们需要一个input，给他绑定list属性，list值为datalist的id值。然后我们需要有一个datalist，并给予他一个id。而option和/option之内的值为展示的内容。

 

Firefox Google IE差异

    我一直以为各个浏览器对于datalist差异只存在于样式上，结果差异还是有很多的。下面用几个例子来说明。

 

    例子1

	google	firefox	IE
单击获得焦点	能展示所有当前值	没反应，不会展示当前值	同谷歌的效果
双击获得焦点	能展示所有当前值	同谷歌的效果	同谷歌的效果
有值	能展示包含此值的选项	同谷歌的效果	同谷歌的效果
删除值后	无效果	同谷歌的效果	展示所有值
删除值后再单击	能展示所有当前值	同谷歌的效果	同谷歌的效果

 

    例子2

    差异同上

 

    例子3

	google	firefox	IE
样式	可以同时展示value和内容	只能展示内容	只能展示内容
输入值	能从值和内容中查出	只能查出内容	只能查出值
单击选值后	展示值	展示值	展示值

 

    例子4

	google	firefox	IE
样式	不一定等宽	等宽	接近等宽

 

    通过以上几部分的对比，你们看出差异了么。使用的时候要小心哦。