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

[haizhilin2013]

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

[DBTXf]

没有用过，现查的。

[dropSence]

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

[coder-OD]

[tongshoutongjiao]

[NingBaozi]

1.定义：H5中新标签，配合 “自动完成”的特性，给用户的选项列表
2.使用：

[linlinLittleTime]

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

[Rui012345]

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>

[shuai4983958]

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

[forever-z-133]

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