A Look into: HTML5 Datalist
You probably have experienced this kind of response somewhere on the Web: when you are typing in an input form, a list of suggestions appears at the bottom of the input.
Over the years, we have relied on JavaScript to create such a function. Today, we can do that with the new HTML5 <datalist> element. This new HTML5 element allows us to store a list of options that will be shown as users type in the input.
A Look into: HTML5 Placeholder Attribute
One of my favorite new features in HTML5 is the ability to easily add placeholder text. Placeholder text... Read more
HTML5 List Attribute
The <datalist> can be linked to an <input> element using a new HTML5 attribute, list. We can use list in a few input types like text and search. However, according to the Mozilla Developer Network, the list attribute is not applicable within the following input types: hidden, checkbox, radio, file, and button.
In the following example, we add a list of cities with <datalist> and assign it with an ID attribute, like so:
<datalist id="city"> <option value="Adelaide"> <option value="Bandung"> <option value="Bangkok"> <option value="Beijing"> <option value="Hanoi"> <option value="Ho Chi Minh City"> <option value="Hong Kong"> <option value="Jakarta"> <option value="Kuala Lumpur"> <option value="Osaka"> <option value="Seoul"> <option value="Shanghai"> <option value="Singapore"> <option value="Surabaya"> <option value="Sydney"> <option value="Tokyo"> </datalist>
To hook the <datalist> to an <input> element, simply add the list attribute and refer to the id attribute, like so:
<input class="destination-list" type="text" placeholder="From:" list="city"> <input class="destination-list" type="text" placeholder="To:" list="city">
Browser Behavior
Browsers that support the <datalist> element, such as Chrome, Opera, and Firefox, act slightly differently.
In Chrome, it will show the options that start with the value typed in. In the example below, Chrome shows values that start with “s”.
On the other hand, clicking on the input twice will show all the available options, as shown below.
In Opera, focusing on the input form immediately shows all the options, which are then sorted based on the initial letters typed in.
Firefox will not show anything upon focusing on the input. It will show the options that contain the values as they are typed in. For example, the screenshot below shows Firefox displaying the options that contain the letter “u”.
Safari currently does not support the <datalist> element, and Internet Explorer is reported to support this element starting from version 10.
Using HTML5 Datalist with Polyfills
Several polyfills exist to replicate similar functionality in unsupported browsers. In this post, we will implement the datalist polyfills from Michael Taylor. To use it, jQuery and Modernizr are needed for browser feature detection.
As for Modernizr, a few customizations are required. In the Modernizr download page, check the following options:
- Input Attributes under the HTML5 section
- Modernizr.addTest under the Extensibility section
- Modernizr.load under the Extra section
- elem-datalist under the Non-core detects
Now, open the HTML document where the <datalist> element is added and include the Modernizr library just downloaded in the <head> section.
<script src="js/modernizr.js" type="text/javascript"></script>
After adding Modernizr, test if the browser supports the datalist element with the script below:
alert('This browser does not support HTML5 datalist element, so we will load the polyfills');
}
The script above will show an alert saying “This browser does not support HTML5 datalist element, so we will load the polyfills” when the datalist element is not supported. In Safari, it looks like this:
Next, create a new JavaScript file named load.datalist.js and add the line below. This will target and run the script on the input that has the list attribute.
$('input[list]').datalist();
Lastly, load jQuery, jquery.datalist.js, and load.datalist.js using Modernizr.load, as follows:
Modernizr.load({
test: Modernizr.datalistelem,
nope: ['js/jquery.js', 'js/jquery.datalist.js', 'js/load.datalist.js']
});
Thus, they will be loaded only when the browser does not support the <datalist> element.
That’s it! Now you can view the demo in action or download the source file from the links below.
Further Resources
Below are a few resources to dig into this subject further:
- HTML5 Datalist Element, Predefined options for other controls – W3.org
- HTML5 Datalist – David Walsh
- Example of a dynamic HTML5 datalist control – Raymond Camden