A Look into: HTML5 Datalist

This article is part of our “HTML5/CSS3 Tutorials series" – dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series.

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 rely on JavaScript to create such a function. Today, we are able to do that with the new HTML5 <datalist> element. This HTML5 new element allows us to store a list of options that will be shown as the users type in the input.

Recommended Reading: A Look Into: HTML5 Placeholder Attribute

HTML5 List Attribute

The <datalist> can be linked to <input> element using a new HTML5 attribute, list. We can use list in a few input types like text and search. But, according to 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 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 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

Each browsers that support <datalist> element, Chrome, Opera and Firefox act slightly different.

In Chrome, it will show the options that start with the value we type in. In the example below, Chrome shows values that start with “s”.

On the other hand, as we click on the input twice, it will show all the options available, as shown below.

In Opera, as we are focusing on the input form, it immediately shows all the options and then sort them based on the initial letters we type in.

Firefox will not show anything upon focusing in the input. It will show the options that contain the values as we type them in. For example, this screenshot below shows Firefox displaying the options that contain the letter “u”.

Safari at the moment, does not support the <datalist> element and Internet Explorer is reported to support this element as of version 10.

Using HTML5 Datalist with Polyfills

There are a few polyfills to replicate similar functionality in unsupported browsers. In this post, we will implement the datalist polyfills from Michael Taylor. To use it, we will need jQuery and Modernizr for browser feature detection.

As for the Modernizr, we have to make a few customizations. 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, let’s open the HTML document where we add the <datalist> element and add the Modernizr library we have just downloaded in the <head> section.

<script src="js/modernizr.js" type="text/javascript"></script>

After adding Modernizr, we can test the browser whether it supports datalist element with the script below.

if (!Modernizr.datalistelem) {
	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 datalist element is not supported. In Safari, it looks like this.

Next, create a new JavaScript file named load.datalist.js and add this line below in it. This will target and run the script to the input that has the list attribute.

$('input[list]').datalist();

Lastly, we will load the 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 <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

via hongkiat.com http://www.hongkiat.com/blog/html5-datalist/

Photoshop CS6 Download