Earlier this morning I saw the following tweet:

I thought it made sense and figured - why not build a version using the <datalist> tag? I began by doing a quick Google search for a select drop down of countries. I came across this one: ISO Country List - HTML select/dropdown snippet. From that I simply copied and pasted the HTML. Here it is - with a few countries cut out. Like most of the world. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Select Country</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>

<form>

<!-- credit: http://www.freeformatter.com/iso-country-list-html-select.html -->
<select>
	<option value="AF">Afghanistan</option>
	<option value="AX">Åland Islands</option>
	<option value="AL">Albania</option>
	<option value="YE">Yemen</option>
	<option value="ZM">Zambia</option>
	<option value="ZW">Zimbabwe</option>
</select>

</form>

</body>
</html>

And yeah - this works - but the UX is not terribly optimal. At minimum the US should really be on top if your audience is principally American. I mean, this is cool, right?

Ok, so how to convert this to a datalist? I just need to add a text input and convert the dropdowns. The current code uses both a value and a text field, but datalists support only one value. I went into my console and wrote this code: 

s = $("select");
html = "";
for(var i=0;i<s.options.length; i++) { html+= "<option value=\""+s.options[i].text+"\">\n"; }
copy(html);

This gave me a copy of the rendered string in my clipboard that I just then copied to a new file: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Select Country</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>

<form>

<!-- credit: http://www.freeformatter.com/iso-country-list-html-select.html -->
<input name="country" list="countries">
<datalist id="countries">
<option value="Afghanistan">
<option value="Åland Islands">
<option value="Albania">
<option value="Algeria">
<option value="Zambia">
<option value="Zimbabwe">
</datalist>

</form>

</body>
</html>

The result is a bit nicer I think.

Of course, there are a few disadvantages to this approach. First, you lose the associated country code. But you could easily do that server side. If for some reason a user enters a made up country, or simply mispells, then you would need to either just accept it or make them enter it again. The other issue is what happens if the user is on a browser that doesn't support datalist. The cool thing is that - guess what - they can still type - so nothing is really lost. You could write a few lines of code to detect support for datalist and where it doesn't exist, dynamically replace the tag (you can still get it even if the browser doesn't support it) with a select tag.

On the off chance you want to try this, here is the giant dropdown version and here is the datalist version.