Datalist element
Method of setting a list of options for a user to select in a text field, while leaving the ability to enter a custom value.
IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Chrome for Android | Firefox for Android | IE Mobile | UC Browser for Android | Samsung Internet | QQ Browser | Baidu Browser |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
49
See notes:
|
|||||||||||||||||
56
See notes:
|
9.3 | 4.4 | |||||||||||||||
14
See notes:
|
52
See notes:
|
57
See notes:
|
10 | 10.0-10.2 | 4.4.3-4.4.4 | 4 | |||||||||||
11
See notes:
|
15
See notes:
|
53
See notes:
|
58
See notes:
|
10.1 | 44
See notes:
|
10.3 | all | 56 | 10 | 37 | 57 | 52
See notes:
|
11 | 11.4 | 5 | 1.2 | 7.12 |
54
See notes:
|
59
See notes:
|
TP | 45
See notes:
|
||||||||||||||
55
See notes:
|
60
See notes:
|
46
See notes:
|
|||||||||||||||
56
See notes:
|
61
See notes:
|
Notes
While most commonly used on text fields, datalists can also be used on other input types. IE11 supports the element on range
fields. Chrome and Opera also support datalists to suggest given values on range
, color
and date/time fields.
-
1
Partial support refers to a bug where long lists of items are unscrollable resulting in unselectable options.
-
2
Partial support in IE refers to significantly buggy behavior (IE11+ does send the input and change events upon selection).
- 3
Links
Mozilla Hacks article
HTML5 Library including datalist support
Mozilla Developer Network (MDN) documentation - datalist
WebPlatform Docs
Eiji Kitamura's options demos & tests
Minimal Datalist polyfill w/tutorial
Minimal and library dependency-free vanilla JavaScript polypill
Minimal and library dependency-free vanilla JavaScript polyfill