Use a DataList element for an HTML5 Auto Complete Experience

Guided user input is almost always a good idea when architecting a data entry experience. You want to help the user avoid potential mistakes. With on screen, mobile keyboards you want to reduce the keystrokes required to enter data and at the same time make sure the data entered is at least valid if not absolutely correct.

Ever since Google first introduced a little search phrase suggestion to their home page several years back the notion of an auto-complete has become popular. There are many tutorials around the Internet about how you can implement this simple piece of AJAX magic.

HTML5 adds support for many useful form/data entry enhancements. One that does not get much attention is the DATALIST element. This element acts as a placeholder for a native browser auto-suggest feature. Where most AJAX auto-suggest plugins and libraries inject or leverage an absolutely position element containing the list of potential values, the DATALIST handles this natively.

<

input

id

="email"

type

="email"

multiple

name

="cc"

list

="contacts"

/>


<

datalist

id

="contacts"

></

datalist

>


You can associate any INPUT field to a DATALIST element. I have also found it possible to associate multiple INPUTs to a single DATALIST. The association is made by setting the INPUT's list attribute to the id of the target DATALIST. This of course means you need to provide a unique id for each DATALIST.

You can pre-populate the DATALIST if you want. The DATALIST should contain a list of OPTIONS, similar to the DROPDOWN list element. Each OPTION's value will be used to display in the list. When the user selects an item from the auto-suggest list the value is placed in the active INPUT field.

<

datalist

id

="contacts"

>


<

option

value

="hedral@damowmow.com"

>


</

option

><

option

value

="pillar@example.com"

>


</

option

><

option

value

="astrophy@cute.example"

>


</

option

><

option

value

="astronomy@science.example.org"

>


</

option

></

datalist

>


The DATALIST does not need to be pre-populated to work. You can dynamically add items at run-time. This means you can wire an existing AJAX solution to use the DATALIST. In this example I bind a list of e-mails to the DATALIST when focus is set to the targeted INPUT.

var

emails = [{

"address"

:

"hedral@damowmow.com"


}, {

"address"

:

"pillar@example.com"


}, {

"address"

:

"astrophy@cute.example"


}, {

"address"

:

"astronomy@science.example.org"


}, {

"address"

:

"chris@love2dev.com"


}],
email = document.getElementById(

"email"

),
emaildl = document.getElementById(

"contacts"

);
email.addEventListener(

"focus"

, setDL);

function

setDL(e) {

var

i = 0, emlist =

""

;

for

(i = 0; i < emails.length; i++){
emlist +=

"<option value='"

+ emails[i].address +

"'>"

;
}
emaildl.innerHTML = emlist;
}

The new DATALIST element is a very helpful tool to guide users to the correct value. Because it is native to the browser it includes common auto-suggest functionality for pesky data entry tasks. You should always make an effort to make data entry easy and the DATALIST element is a great tool to make a frustrating form much easier to use, increasing productivity, sales conversions and overall user satisfaction.

Share This Article With Your Friends!