Developing a Better Country Selector

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.

It’s not.

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.

Fortunately, Christian Holst from the Baymard Institute has developed a solution which solves the issues for us: see Redesigning the Country Selector.

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-priority code 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 data-alternative-spellings attribute.

To convert the select to an auto-complete box you simply need to call the jQuery plugin method:

$("#country-selector").selectToAutocomplete();

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.