Easy Text Input “Hints” with the HTML <datalist> Tag

HTML5

HTML5 Logo
Provide helpful “hint” functionality for your text-inputs with just a little bit of hidden markup: the <datalist> element!

One of the newer HTML5 elements that I hear very little about is the Datalist tag. I’m a bit surprised by this because the datalist element is super-easy to implement and quite helpful.

In a nutshell, this tag provides easy “hint-like” behavior for text-inputs.

Surely we’ve all seen how some websites will provide “hints” as you type in a text-box. One of the most common examples, of course, is Google search. As you type, a list of words that match your input appear in and below the text box.

Most noteworthy: the HTML5 Datalist tag is not supported in Internet Explorer version 9 and below, nor Safari. But I think most would agree that this feature is an enhancement. So, you could implement it in your page, and consider it a “nice to have” if the user’s browser supports it.

Needless to say, any real-time “wildcard” implementation of this concept requires not only AJAX but some pretty serious back-end engineering that will provide useful hints quickly.

But what if you have a fairly strong idea of what the user “might” type. For example, let’s say that you prompt the user to enter the name of a European country in a text box. While that text box may allow any input, the user is likely to enter words such as “Austria”, “Belgium” or “Czech Republic”. So, why not add a little sugar to your page and “suggest” some of those words as they type?

Example # 1

Here in Example # 1, we have a very simple HTML form. Below that is the HTML5 Datalist element. That list is bound to the form by setting the form’s “list” attribute to the ID of the datalist (i.e. “euroCountries”).

Yes, it really is that simple.

HERE IS THE JS-FIDDLE.NET LINK FOR EXAMPLE # 1: http://jsfiddle.net/z99Jx/3/

How to Demo: When you view the JsFiddle.net link for Example # 1, you will see a text-input field in the output area. So, you just put your cursor in that input field and type any letter between “A” and “F”. And, of course, as you type, any country from the “euroCountries” list that has that letter in its name appears as a “hint”.

Oh my goodness… it really is that simple!

Example # 2

Now, here in Example # 2, there is code that you can run against this very web page. You may notice that in the upper-right-hand corner of this page, there is the text: “Search This Blog”. Below that is a text-input. If you type any letter between “A” and “F” right now, nothing happens.

Copy the code from Example # 2, paste it into your JavaScript console, and then execute it. Now, when you type any letter between “A” and “F”, any country from the “euroCountries” list that has that letter in its name appears as a “hint”.

Summary

In this article we learned about the new HTML5 Datalist tag. We also learned how this element can be used to provide “hints” for text input form elements. And finally, we learned how to bind that list to an input element, and set a list of options that will become the “hints”.

Helpful Links for the HTML5 Datalist tag

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

http://caniuse.com/datalist

http://www.htmlgoodies.com/html5/markup/whats-new-in-html5-forms-the-datalist-control.html#fbid=NYUB4nW2C7h

http://www.quackit.com/html_5/tags/html_datalist_tag.cfm

http://webdesign.tutsplus.com/tutorials/introducing-the-html5-datalist-element–webdesign-9888

http://davidwalsh.name/datalist