Post navigation

Creating Autocomplete Dropdowns with the Datalist Element

The <datalist> element, a new addition in the HTML5 specification, allows developers to create native autocomplete dropdowns for their web applications. This type of user interface component is commonly used on form fields and search boxes as it helps the user input data faster. In the past, autocomplete dropdowns could only be achieved using JavaScript.

In this blog post, you’re going to learn how to use the <datalist> element to create native autocomplete dropdowns for your applications.

Let’s get started.

The <datalist> Element

A datalist autocomplete dropdown in Google Chrome.

The <datalist> element is used to specify all of the possible values for the autocomplete list. Each of these values is defined using an <option> element, as shown in the example below.

The <datalist> element should have an id attribute. To link your datalist to an <input> element, you need to specify a list attribute on the input and set its value to the id of your datalist.

<input type="text" list="languages">

That is all you need to add auto-complete functionality to an <input> element. The browser will take care of searching the datalist options for matching values and then displaying those to the user.

Loading Options via AJAX

A datalist autocomplete dropdown with options loaded via AJAX.

If you want to add a large number of options to your <datalist>, you may want to store those values in an external JSON file. You can then fetch this file via AJAX and populate the <datalist> options once the page has loaded. Let’s look at an example of how to do this.

Like before, we start with <input> and <datalist> elements. Ensure that you link the two using the id and list attributes.

Next, we need to load the JSON file (html-elements.json) and populate the options for the <datalist> element. For this example, we’re just using an array of strings, but it’s also possible to use a more complex data structure.

This code will load the html-elements.json file using an XMLHttpRequest. Once the file has been fetched, we parse the raw JSON data so that we have a JavaScript array to work with. We then loop over each of the items in this array. Each time we create a new <option> element, set the value attribute to the current item in the array, and then add this <option> element to the <datalist>.

In this example we’re also using the <input> element’s placeholder property to display the loading status for the datalist options.

Browser Support

Support for the <datalist> element among browsers is pretty good. Safari is the only modern web browser not to include support for <datalist>. It’s worth noting that the implementation of this element in IE10 is known to be buggy.

Final Thoughts

In this post, you’ve learned how to use the <datalist> element to create native autocomplete dropdowns for your web applications. You’ve also learned how to use AJAX to populate datalist options from an external JSON file.

The <datalist> element is just one of a number of new elements that provide native implementations of commonly used UI components. By making these elements really simple to use, browser vendors are removing the need for developers to rely on JavaScript libraries in these areas. Standardizing the behavior of UI components also has the added benefit of creating a more consistent experience for users across the web.

It would be interesting if you could gather screenshots across a range of mobile devices to see how their ‘adaptive’ interfaces handle this (E.G. when a user interacts with a number field they’re displayed a keyboard with only numbers).

Hello! We're the teachers here at Treehouse. We produce video courses on everything from web design and web development to iOS and business skills. You can browse our full library of content to find the course that's right for you.

In the meantime, explore the free features, tips, tricks and videos here on our blog. Tell us what you think, we'd love to chat: blog@teamtreehouse.com

Stay Updated

Sign up for our newsletter, and we'll send you news and tutorials
on web design, coding, business, and more! You'll also receive these
great gifts:

checkArt and the Web: Line, Shape, and Form - An eBook by Treehouse Teacher Nick Pettit.

checkOn Freelancing - An audiobook about running your own business by Simon Collison.

Treehouse Project

If you’ve never built a website before and you have no coding or design experience, this is the place to start. In this project, we learn how to build a modern portfolio website for desktops, tablets, and mobile devices. We start with basic HTML and CSS syntax. Next, we learn how to build custom web pages with an image gallery and contact page. Finally, we walk through how to share a website live on the web.

Swift is a new programming language created by Apple to program iOS apps. If you are new to programming or to Swift then this course is for you. Learn about programming concepts like: variables, types, collections and control structures.

Ruby is a programming language with a focus on simplicity and productivity, and it's used to create some of the biggest websites in the world. Learn how to work with Ruby and write simple Ruby programs in this introductory course.

Interested in creating Android apps? Learn the Java programming language, a tool for Android development called Android Studio, and some very basic concepts of the Android Software Development Kit, or SDK.

Bring your big idea to life! Learn how to start a company on the right foot with an introduction to basic business concepts, including corporate structure, marketing, finance, and accounting. Then you’re ready for more advanced business strategies.