- Attribute of
- What does
- Specifies the id of a <datalist> element which provides a list of autocomplete suggestions for the input field.
<form> <label for="color">Favorite color?</label><br> <input name="color" id="color" list="colors"> </form> <datalist id="colors"> <option>Red</option> <option>Yellow</option> <option>Blue</option> <option>Green</option> <option>Orange</option> <option>Purple</option> <option>Black</option> <option>White</option> <option>Gray</option> </datalist>
list attribute identifies a separate
<datalist> element (by
id), which provides a set of pre-defined "auto-complete" options.
It can be easy to mix up these different styles of user input, as they each do something similar. However, nce you understand the differences, it will be easy to select the appropriate one for any situation. The
<select> element provides several
<options> which the user must select between. The user may not enter anything that is not provided for in the list of options. The difference here between using a
<select> element and an
<input> element with a
<datalist> is that with a
<datalist>, the user is free to reject any of the options in the list and enter a free string. The options in the list are simply suggestions. The
autocomplete attribute allows the browser to provide autocomplete suggestions based on the user's inputs to other forms on other websites — for example, the user's own name, email address, or contact information. In contrast to that, the
<datalist> lets the website itself suggest options. This can be useful for things like tags and search terms. In both cases (
<datalist>), the user is free to reject the suggestions and enter whatever they like into the input field.
<datalist> input combination are powerful UX tools for form usability. Unfortunately, the implementation in various browsers is a bit buggy. As of this writing:
- Support in both Internet Explorer and Edge is "extremely buggy".
- Chrome and Opera both display unscrollable suggestion lists, which makes very long lists unusable.
- Firefox mostly works, but does not support use of
<datalist>on non-text inputs.
- Support in both the desktop and iOS versions of Safari is simply non-existent.
<datalist> is well implemented in both the native Android browser and the Chrome browser app for Android.
- If you are using jQuery (you probably are), you can try jQuery Autocomplete.
- If you need a particularly lightweight solution, try Awesomeplete (only 2kb!).
- If you need a really robust and flexible solution with a lot of options to control, try Twitter's Typeahead.
- For HTML5 mobile apps (built in something like PhoneGap), you may want a fully integrated forms solution. In that case, you should look at jQuery UI, which includes an autocomplete feature.
Browser Support for list
|10 (Buggy)||43 (Problems)||45 (Problems)||13 (Buggy)||Not supported.||35 (Problems)|