Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

The HTML5 Datalist Element: A New Method For Autocomplete

DZone's Guide to

The HTML5 Datalist Element: A New Method For Autocomplete

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Most people use the jQuery library jQuery UI in their applications, this gives you access to a number of useful elements that you can use, these consist of the colour picker, sliders, accordions, dialog boxes, menus and progress bars. One of the most useful elements that is in the jQuery UI library is the autocomplete element.

jQuery UI Autocomplete

This works by first creating a Javascript object which you can populate with a number of options which will be searched when you enter text in the autocomplete textbox.
01. <script>
02.   $(function() {
03.     var availableTags = [
04.       "ActionScript",
05.       "AppleScript",
06.       "Asp",
07.       "BASIC",
08.       "C",
09.       "C++",
10.       "Clojure",
11.       "COBOL",
12.       "ColdFusion",
13.       "Erlang",
14.       "Fortran",
15.       "Groovy",
16.       "Haskell",
17.       "Java",
18.       "JavaScript",
19.       "Lisp",
20.       "Perl",
21.       "PHP",
22.       "Python",
23.       "Ruby",
24.       "Scala",
25.       "Scheme"
26.     ];
27.     $( "#tags" ).autocomplete({
28.       source: availableTags
29.     });
30.   });
31. </script>
32.  
33. <divclass="ui-widget">
34.   <labelfor="tags">Tags: </label>
35.   <inputid="tags"/>
36. </div>

There are lots of new features that come with HTML5 most of them use additional Javascript APIs, others replace existing functionality that we would use Javascript for such as form validation can now be replaced with the require attribute. The placeholder attribute is another feature that you used to have to use Javascript for.

There is an element in HTML5 called Datalist that will allow you to create an autocomplete boxes without using any Javascript.

First you create the datalist element which has an ID and a option list.

01. <datalistid="availableTags">
02.     <optionvalue="ActionScript">
03.     <optionvalue="AppleScript">
04.     <optionvalue="Asp">
05.     <optionvalue="BASIC">
06.     <optionvalue="C">
07.     <optionvalue="C++">
08.     <optionvalue="Clojure">
09.     <optionvalue="COBOL">
10.     <optionvalue="ColdFusion">
11.     <optionvalue="Erlang">
12.     <optionvalue="Fortran">
13.     <optionvalue="Groovy">
14.     <optionvalue="Haskell">
15.     <optionvalue="Java">
16.     <optionvalue="JavaScript">
17.     <optionvalue="Lisp">
18.     <optionvalue="Perl">
19.     <optionvalue="PHP">
20.     <optionvalue="Python">
21.     <optionvalue="Ruby">
22.     <optionvalue="Scala">
23.     <optionvalue="Scheme">
24. </datalist>

Now we can create a input type of list to use these options in the autocomplete.

1. <inputname="availableTags"list="availableTags"/>

Demo

Browser Support

The datalist element is current supported in Chrome, Firefox and Opera.

View the current supported table to see exactly what browsers support it.

Caniuse Datalist





Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}