Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
haizhilin2013 opened this issue Jul 2, 2019 · 12 comments
Labels
html html

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the html html label Jul 2, 2019
@DBTXf
Copy link

DBTXf commented Jul 3, 2019

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

@dropSence
Copy link

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

@coder-OD
Copy link

coder-OD commented Jul 3, 2019

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

@tongshoutongjiao
Copy link

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

@NingBaozi
Copy link

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

@linlinLittleTime
Copy link

标签规定了 标签中可能的选项列表;
标签中的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>

@Rui012345
Copy link

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

@xujunBachlor
Copy link

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
Copy link

yxkhaha commented Jul 3, 2019

  • datalist 用来展示input框的可选项,需要和input关联,自身的id值为input的list值。如:
<input list="list">
<datalist id="list">
     <option value="123"></option>
    <option value="456"></option>
</datalist>

@shuai4983958
Copy link

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

@forever-z-133
Copy link

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

@smile-2008
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
html html
Projects
None yet
Development

No branches or pull requests