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

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

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

<!DOCTYPE HTML>
<html>
<body>
    <input list="data" />
    <datalist id="data">
    	<option value="11">aa</option>
    	<option value="12">bb</option>
    	<option value="13">cc</option>
    </datalist>
</body>
</html>

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

Firefox Google IE差异

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

例子1

<input type="text" id="field9877" list="field9877_1">
<datalist id="field9877_1">
	<option value="1"></option>
	<option value="12"></option>
	<option value="2"></option>
</datalist>

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

例子2

<input type="text" id="field9877" list="field9877_1">
<datalist id="field9877_1">
	<option>1</option>
	<option>12</option>
	<option>2</option>
</datalist>

差异同上

例子3

<input type="text" id="field9877" list="field9877_1">
<datalist id="field9877_1">
	<option value="1">AA</option>
	<option value="12">BB</option>
	<option value="2">CC</option>
	<option value="A">DD</option>
</datalist>

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

例子4

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

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

HTML-datalist-1.1

Firefox Google IE差异

猜你喜欢