How to add dropdowns to textboxes in HTML5
I recently had to add a dropdown box to a textbox at work, instead of jumping on the first jQuery plugin I could find, I instead started checking if this feature was finally added to "native html", and it was, and it is called a datalist.
Simple Example
A datalist in HTML5 is a simple way giving a (textbox) input field a dropdown
of choices to select from, you bind a datalist and an input field via
using the list="magic-ponies"
attribute on the input field like so:
<input list="hosting-plan" type="text" />
<datalist id="hosting-plan">
<option value="small" />
<option value="medium" />
<option value="large" />
</datalist>
which will give you this:
Simple example with additional text
As you can see the way you specify values inside the datalist is very similar
to how you would populate a <select>
box, using the <option value="blah">
,
except that you can choose to only have a single self-closing option tag instead
of the usual option-pair like <option value="blah">foo</option>
.
The neat thing about the datalist tag is that if you do choose to give it a text inside the option tag like with a select box, like this:
<input list="hosting-plan" type="text" />
<datalist id="hosting-plan">
<option value="small">$15 USD</option>
<option value="medium">$20 USD</option>
<option value="large">$25 USD</option>
</datalist>
Your textbox will look like this, notice that the price is right-aligned, veryfancy.
Dynamically add list items So all you need to dynamically add items into thedatalist is to append an
<option>
element within the
<datalist>
with some simple JavaScript.
<input list="hosting-plan" type="text" />
<datalist id="hosting-plan">
<option value="small">$10 USD</option>
<option value="medium">$20 USD</option>
<option value="large">$25 USD</option>
</datalist>
<script>
// Create a new option element. var optionNode =
document.createElement("option"); // Set the value optionNode.value = "huge";
// create a text node and append it to the option element
optionNode.appendChild(document.createTextNode("$50 USD")); // Add the
optionNode to the datalist
document.getElementById("hosting-plan").appendChild(optionNode);
</script>
</datalist>
</option>
Populating list dynamically from external resource Here is an example
for dynamically adding data into a datalist from an online resource, in this case the public reddit JSON "file" containing a list of subreddits (http://www.reddit.com/subreddits.json), I am going to display the name of the subreddit and the amount of subscribers of that subreddit in the datalist.
<html>
<head>
<title>Subreddit Picker</title>
</head>
<body>
<h1>Select your favorite Subreddit</h1>
<input type="text" list="hosting-plan" />
<datalist id="hosting-plan"></datalist>
<script>
// Wait for the dom to be loaded
document.addEventListener('DOMContentLoaded', function (event) {
// Setup an XMLHttpRequest / AJAX request
var request = new XMLHttpRequest();
request.open('GET', 'http://www.reddit.com/subreddits.json');
// Setup an "event listener".
request.onload = function () {
if (request.status >= 200 && request.status < 400) {
var response = JSON.parse(request.responseText.toString());
response.data.children.forEach(function (el) {
addListEntry(el.data.display_name, "Subs: " + el.data.subscribers);
});
}
};
// Send our request
request.send();
});
// Break the list adding code into a function for easier re-use
function addListEntry(value, text) {
// Create a new option element.
var optionNode = document.createElement("option");
// Set the value
optionNode.value = value;
// create a text node and append it to the option element
optionNode.appendChild(document.createTextNode(text));
// Add the optionNode to the datalist
document.getElementById("hosting-plan").appendChild(optionNode);
}
</script>
</body>
</html>
</datalist>
</option>
You can check out the example site here.
Browser Support
As web developers we often have to maintain support for older browsers and systems, I fortunately only have to officially support Chrome and the Default Android and iOS browsers at my workplace, but for the completeness, here are a breakdown of the browser support for the datalist element.
- Internet Explorer
- Partially supported by IE from version 10
- Not supported before version 9
- FireFox
- Supported from version 4
- Chrome
- Supported from version 20
More detailed information can be found on Can I Use.
I hope you learned something new from this post, now go forth and build awesome HTML5 thingies.
Note: To better support older browsers and Safari, you can include this polyfill.
Update 25.11.2015
Webucator was so kind as to use this blog post as an inspiration for one of their videos, you can watch the video below.
https://www.youtube.com/watch?v=iNRQm15qtg8
Webucator is a company that provides various training courses related to web development and various other tech fields, feel free to check out their HTML Training as well as their other courses.