Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
HTML5 includes a slew of new data widgets to enhance the user experience of filling out forms. One of these new options is the datalist element. The datalist allows you to define a list of options that the user can pick from to pre-select. The user can still choose to type another value but this element enhances ease of use by allowing you to suggest common options.
The User Experience
When the user tabs into the field it behaves as a normal textbox until they start typing. When they start typing a list will appear below the textbox that is filtered by the letters they have entered so far. They can then either press the down arrow key to select the item or click it using the mouse.
If the user clicks the field once, the field will get focus as expected but the suggested list of values will not automatically appear. If they click it again, the list will appear.
For find-as-you-type textboxes, datalists provide a superior user experience over a simple filtered div implementation used by most javascript libraries as the browser natively provides the suggestion list box and filters each keystroke. If you are updating the list of available options via Ajax calls, the experience for the user will be much smoother as it filters while new options are loaded from the server.
Compatibility
Chrome and Firefox both support DataLists. Internet Explorer 10, being released with Windows 8, adds support for HTML 5 DataLists. Unfortunately since Microsoft does not intend on releasing Internet Explorer 10 on older versions of Windows, Internet Explorer users on Windows 7 and older are excluded from this functionality.
Fortunately, the DataList enhances the behavior of a form in a way that doesn’t prevent older browsers, such as Internet Explorer 9, from still working as a simple text box without the suggestion list below it. If you need a durable cross-browser solution to offer this type of suggest functionality, you will need to use a separate javascript implementation to support older browsers.
Basic HTML Implementation
The datalist tag defines a list of options that are available to be selected. Nested inside of it are option tags defining each possible value. You then apply that list by ID to the input tags you want by adding a list attribute to the input element you want to apply it to. You can use the same datalist on multiple textboxes on the same page.
<datalist id=”Users”>
<option value=”David Talbot” />
<option value=”John Doe” />
</datalist>
<input type=”text” id=”SelectUser” list=”Users” />
Dynamically Swapping Between Lists
If your application has more than one list to swap between, you can change out the list in use on the textbox by programmatically setting the list attribute.
var u = document.getElementById(“YourTextBox”);
u.setAttribute(“list”, “YourOtherDataList”);
Programmatically Altering DataLists
A statically defined data list adds a layer of usability and polish to your application, you will frequently encounter the need to filter much larger data sets than can be practically sent to the client web browser. In these cases, you can make separate AJAX calls as the user types to filter and re-filter the list of available options in the datalist.
The browser can handle dynamic updates to the list of available option tags inside of the datalist and update the UI automatically.
var o = document.createElement(“option”);
o.value=”New Item “+;
document.getElementById(“Users”).appendChild(o);
The above document object model code is correct and will work but if you are potentially modifying a large number of available options it will not perform very well. I would highly recommend building out your collection as HTML and setting the set via innerHTML.
document.getElementById(“Users”).innerHTML =
“<option value=’a’/><option value=’b’/>”;
Conclusion
The HTML5 DataList component provides another powerful and simple to use tool in your arsenal to create more user-friendly web forms and find as you type search boxes.
About the Author:
David Talbot has over 14 years of experience in the software industry with experience ranging from license plate recognition using neural networks to television set-top boxes to highly scalable web applications. His main focus is building rich user interface web applications on the .NET platform. He is also the author of Applied ADO.NET and numerous articles on technology.
