Working with HTML5 Web Forms: Autocompletion and the Datalist Element

Working with HTML5 Web Forms: Autocompletion and the Datalist Element

Explore two options for adding autocompletion to web forms: the HTML5 datalist element and the jQuery UI autocomplete widget

Typing is generally a boring activity for computer users and a somewhat difficult task for mobile-device users in particular. However, in some input web forms, typing is precisely what users want and need to do. The canonical example is Google: Nearly everyone types keywords, phrases, or questions into the text box. Google, and search engines in general, help with suggestions as the user types -- a feature known as autocompletion, which deserves special attention from developers and usability experts. Autocompletion is especially helpful in any text box that enables users to search for something. Another scenario where autocompletion improves a web form's usability is when the text box can accept strings only from a range of fixed values. In this case, typing into the field is faster than picking the selection from a potentially long drop-down list.

HTML5 provides some support for autocompletion through the datalist element, which makes selection of an item from a relatively long list a quicker process. Here I'll review syntax and semantics of the datalist element and the support that browsers currently offer for it. I will also discuss several alternatives to datalist that are worth considering because browser support for datalist is at present still limited.

The Datalist Element

The datalist element has a fairly simple syntax and is aimed at listing a set of HTML5 option elements in much the same way that an HTML5 select element does. The difference between select and datalist is in the user interface provided by the browser. The select element has its own UI and uses that to present a list of choices to the user. The datalist element, on the other hand, doesn't have a native UI and only provides options to other HTML5 elements, most notably input elements. Listing 1 shows a typical usage example for a datalist element.

Listing 1: The Markup for a Datalist Element



    
    
    
    
    



As you can see in Listing 1, the syntax of the datalist element is nearly identical to that of a select element. But the input element in HTML5 features a new attribute: the list attribute. If the value assigned to the list attribute of an input element of type text matches a datalist element in the page, the options of the datalist will be used as the only accepted values of the input field.

The UI that results from the use of a datalist element is browser specific. Nearly all browsers tend to display it as a drop-down list placed just under the input field. Figure 1 shows the effect of a datalist element as the user starts typing text in Google Chrome 22.

144828_fig1_html5_datalist_element-sm
Figure 1: The Datalist Element in Action

At present, the latest versions of most popular browsers support the datalist element. Overall, though, the number of browser versions that support the datalist element is relatively small and is significantly fewer than the browser versions that have some HTML5 support. In particular, the datalist is supported in Google Chrome starting with version 20 (at the time of this writing, the latest version of Chrome is 22). The datalist is also supported by Firefox since version 14 and Opera since version 12. The datalist is supported on Internet Explorer (IE) only in the latest version shipped with Windows 8: Internet Explorer 10.

If you use the markup shown in Listing 1, the behavior you get from all browsers is mostly uniform, with a few differences. Looking at Figure 1, you can see that Chrome attempts to match the typed text to the start of the string. At present, Firefox is the only browser that uses a lazy algorithm to match typed text to the list of options. Firefox, in fact, matches the typed text against any substring in any of the listed options. Figure 2 shows a screenshot from Firefox; as you can see, the list of options also includes Russia for a typed text of "u".

144828_fig2_html5_datalist_firefox-sm

Figure 2: The Datalist Element in Firefox 15


The list of options can also take a couple of other slightly different formats. According to the W3C standard, the option element is characterized by a value and, optionally, a label. Listing 2 offers another equally valid format for the list of datalist options.

Listing 2: More Precise Markup for a Datalist Element



    
    
    
    
    


In this case, as a developer you can distinguish between display text and value text for each option. Figure 3 show the different output you get from Chrome and other browsers.


144828_fig3_datalist_chrome_labels_values-sm
Figure 3: The Datalist in Chrome When Labels and Values Are Specified

Interestingly, only the value element is taken into account in regard to selection. Once the selection is made, the content of the value attribute is displayed in the input field. The value of the label attribute is used only to format the drop-down menu. This behavior is overall reasonable, but it is the first sign that the datalist element might have some drawbacks.

Datalist and Older Browsers

Using the datalist element is quick and easy, but very few browsers actually support it. Users who pick Firefox or Chrome as their primary browser are relatively safe in the sense that these browsers are self-updating, so that users are likely to have the latest version installed. The same can't be said for IE users -- and the datalist is not recognized under IE9 and earlier versions.

The datalist is not simply a semantic element like header or footer, but it delivers a significant behavior. If a given browser doesn't support the datalist element, as a developer it is your responsibility to ensure that users can have the same experience in some other way. A simple fix consists of embedding a select element in the datalist, as shown in Listing 3.

Listing 3: Embedding a Select Element in the Datalist



   



Newer browsers that recognize the datalist element will safely ignore the embedded select element; older browsers instead will blissfully skip the datalist element and display a classic drop-down list below the input field. By adding a short script, you can also automatically copy the selection to the text box:


Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish