There reaches a point in every web developer’s life when they need a country selector — perhaps for a sign-up form or delivery address. So we find a list of all 249 countries, insert a
select box into our HTML code and consider that a job well done.
Country select boxes are dreadful. The problems include:
1. Too many choices
Locating your country within 249 items is a usability nightmare.
2. An awkward interface
Select box controls differ between devices, OSs and browsers but one thing is certain — the user will need to scroll around to find their country. That often means switching from keyboard to mouse or lots of swiping on your mobile.
3. Sorting problems
If your site is primarily visited by US users, an alphabetic list displays “United Arab Emirates” and “United Kingdom” first. Some developers address this by putting the most likely countries at the top but this can confuse users expecting an alphabetically-ordered list.
4. No consideration for alternative country names
Country lists rarely consider alternative names. I live in the UK but any of United Kingdom, UK, Great Britain, GB, Britain or England could be defined by the developer.
5. Poor internalization
What if a Spanish user tries to locate “España” in your English list? At best, they’ll find Estonia. In addition, lists rarely consider international country codes such as ES or US.
6. No consideration for abbreviations or mis-keying
If a user enters a term such as “nited”, “States” or “America” it’s unlikely they’ll locate the USA.
It’s a jQuery plugin which replaces a standard HTML
select box with an auto-complete control. The jQuery UI Autocomplete plugin is supplied but you can use your own implementation if necessary.
Several properties can be defined in the HTML:
<select name="Country" id="country-selector" autofocus="autofocus"> <option value="Austria" data-alternative-spellings="AT Österreich Osterreich Oesterreich ">Austria</option> <option value="Spain" data-alternative-spellings="ES España">Spain</option> <option value="United Arab Emirates" data-alternative-spellings="AE UAE Emirates">United Arab Emirates</option> <option value="United Kingdom" data-priority="2" data-alternative-spellings="GB Great Britain England UK Wales Scotland">United Kingdom</option> <option value="United States" data-priority="1" data-alternative-spellings="US USA United States of America">United States</option> </select>
This snippet is identical to most country
select code except:
- If a
data-prioritycode is defined, it’s assumed to have a higher priority than countries without a code. The lower the priority number, the higher it will appear in the auto-complete list.
- A space-separated list of alternative codes and spellings can be defined in the
To convert the
select to an auto-complete box you simply need to call the jQuery plugin method:
There are many more options so I suggest you try the demonstration and view the documentation at baymard.com/labs/country-selector. The open-source code is released under the MIT License and is available at GitHub.
The plugin is far superior to other implementations I’ve seen — including, ahem, my own. Note that it doesn’t work in IE6 or 7 but those browsers will still display the standard
select box. It’s not limited to countries either and you can use any type of data. Recommended.
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers