[html] 第78天 你有用过HTML5中的datalist标签吗？说说你对它的理解

[haizhilin]

第78天 你有用过HTML5中的datalist标签吗？说说你对它的理解

[ATXF]

没有用过，现查的。
标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

[王彪]

datalist是HTML5新增的标签 用于在用户输入时给出一批建议数据 如果需要用到datalist 请给对应的input的list属性和datalist的ID属性设置上一样的属性值 datalist给出的选项用option包裹 选项值用option的value属性给出。datalist支持全局属性和事件属性。

[Marshall]

定义选项的列表，跟input配合使用，展示input可能输入的值，并且根据输入进行过滤，既可以选择定义在datalist中的项，也可以自行输入值，注意需要用input中的list属性来绑定datalist

[zhaohailong]

标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
以上是w3c给的定义，之前没用过，看起来还挺方便的。

[NingBaozi]

1.定义：H5中新标签，配合 “自动完成”的特性，给用户的选项列表
2.使用：中排列选项，并与input绑定（中list与中id选项值相同）
3.兼容：ie9以上

[linlinLittleTime]

标签规定了 标签中可能的选项列表；
标签中的id要与标签中的list相对应；
实例：

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

[Grey]

datalist是h5定义的新标签，给出用户选项，配合input使用，input中的list属性值与datalist中的id属性值关联。

[xujunBachlor]

datalist是html5新增的元素，与input输入框搭配使用，类似select下拉框，支持模糊搜索选项，支持键盘上下键操作，回车键可以触发onchange 事件，选中option可以触发onchange事件

<input list="list" onchange="ahri(event)">
<datalist id="list">
	<option value="ahri">
	<option value="annie">
	<option value="akali">
	<option value="leona">
	<option value="dianna">
</datalist>
<script>
function ahri(e) {
	console.log(e.target.value)
}
</script>

[yxkhaha]

• datalist 用来展示input框的可选项，需要和input关联，自身的id值为input的list值。如：

<input list="list">
<datalist id="list">
     <option value="123"></option>
    <option value="456"></option>
</datalist>

[shuai]

datalist是html5新增的标签，是一个标签选项卡，功能类似于select。
用法：通过跟input一起用，保证list的属性值跟datalist的id值保持对应，就可以通过input输入来模糊匹配datalist当中option的值

[forever-z-133]

感觉大家都没有在项目中用过呢，反正很不好用就对了，
因为往往这块是异步请求重绘 option 的嘛，但何时下拉出现处理得非常不秒，
option 的样式不可改，内部元素也定高等问题，造成其非常鸡肋呀。

[MrZ]

没有用过，现查的。
标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。