HTML
<datalist>
element
contains a set of
<option>
elements that represent the permissible or recommended options available to choose from within other controls.
| 内容类别 | 流内容 , 措词内容 . |
|---|---|
| 准许内容 |
要么
措词内容
or zero or more
<option>
元素。
|
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts 措词内容 . |
| Implicit ARIA role | listbox |
| Permitted ARIA roles |
No
role
permitted
|
| DOM 接口 |
HTMLDataListElement
|
This element has no other attributes than the 全局属性 , common to all elements.
<label for="myBrowser">Choose a browser from this list:</label> <input list="browsers" id="myBrowser" name="myBrowser" /> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> <option value="Microsoft Edge"> </datalist>
The style of the list produced by a
<datalist>
element is platform-dependent, so if you want to customize the display of the options, you have to implement your own custom solution that overrides the default behavior. The below example provides a simple solution for this. Note how we haven't specified the
<datalist>
id
在
<input>
list
attribute in this case, as that stops the browser-specific display of the data list items from kicking in. Instead, we are setting the selected
<datalist>
value in the
<input>
via JavaScript.
注意
: Since
::after
is not permitted on
<input>
elements, if you want to reproduce the arrow-down icon you will have to wrap the
<input>
element in another element that you can hang the styling on (or some other suitable solution).
<input list="" name="option" id="input" autocomplete="off" > <datalist id="datalist"> <option>Carrots</option> <option>Peas</option> <option>Beans</option> </datalist>
datalist {
position: absolute;
background-color: lightgrey;
font-family: sans-serif;
font-size: 0.8rem;
}
option {
background-color: #bbb;
padding: 4px;
margin-bottom: 1px;
cursor: pointer;
}
input.onfocus = function () {
datalist.style.display = 'block';
}
for (let option of datalist.options) {
option.onclick = function () {
input.value = this.value;
datalist.style.display = 'none';
}
}
datalist.style.width = input.offsetWidth + 'px';
datalist.style.left = input.offsetLeft + 'px';
datalist.style.top = input.offsetTop + input.offsetHeight + 'px';
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of '<datalist>' in that specification. |
实时标准 | |
|
HTML5
The definition of '<datalist>' in that specification. |
推荐 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
datalist
|
Chrome 完整支持 20 | Edge 完整支持 12 | Firefox 完整支持 4 | IE 完整支持 10 | Opera 完整支持 9.5 | Safari 完整支持 12.1 | WebView Android 完整支持 4.4.3 | Chrome Android 完整支持 33 |
Firefox Android
完整支持
4
注意事项
|
Opera Android
部分支持
Partial
注意事项
|
Safari iOS 完整支持 12.2 | Samsung Internet Android 完整支持 2.0 |
完整支持
部分支持
见实现注意事项。
Include this polyfill to provide support for older and currently incompatible browsers:
datalist-polyfill
<button>
<datalist>
<fieldset>
<form>
<input>
<label>
<legend>
<meter>
<optgroup>
<option>
<output>
<progress>
<select>
<textarea>