Faster Country Selection with an Autocomplete Textbox

by on 09/22/10 at 12:48 pm

People that live in the United States have a small convenience that people in other countries don’t have. Their country is the default option in country dropdown boxes in forms. This means they don’t have to spend their time and energy scrolling through a long list of over 100 country names looking for their country.

Those that don’t live in the United States, however, may find themselves facing this user interface nightmare the next time they have to select their country on a form. The good news is that there is a better way to select countries by using a different type of user interface control.

Autocomplete Textbox

The autocomplete textbox is a control that adapts to user input. Instead of displaying an overwhelming list of countries in adropdown box that takes up the entire screen, an autocomplete textbox suggests a small collated subset of countries that matches the user’s input.

The benefit of this is that users don’t have to scroll through a giant list of country names in alphabetical order. As the user types in their country name, the autocomplete textbox will automatically narrow the giant list of countries down to a fraction. When users see fewer countries, they’re able to select their country faster.

An autocomplete textbox is an efficient and effective replacement for the dropdown box. When users have to scroll through over 100 countries in a dropdown box, an autocomplete textbox is the solution that will give your users a better form experience.

It doesn’t matter what country they live in, all users want to get through forms faster and easier. Designers should start implementing autocomplete textboxes in place of select menus on their forms.

Make It Happen


Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns


Elegant Themes UX T-Shirts

Author and founder of UX Movement. Founded this site to help you learn user experience design for a more user-friendly world.

11 Responses to “Faster Country Selection with an Autocomplete Textbox”

  1. Derek McTavish Mounce

    Sep 22nd, 2010

    Yup, nice. But the one-step-further is… instead of either a selectbox *or* an autocomlete, do both. A selectbox that filters based on what you’ve typed. It’s something I’ve been using a lot lately, and it works very nicely. And it degrades quite well. :)

  2. Mouly

    Sep 23rd, 2010

    How about using geolocation to select the user’s current country as the default?

    • Anthony

      Sep 23rd, 2010

      Text suggestion boxes are commonly used on travel sites, example, searching for a flight from one destination to another. Some sites are starting to use geo-location to pre-populate the “From” part of your trip.

  3. Soren

    Sep 23rd, 2010

    Opening the standard drop down and pressing “d” will also take you to the first Country starting with that letter. Most operating systems will also allow you to type more than one letter (if done quickly) and writing “do” would then take you straight to “Dominica” instead of “Denmark”.

    Another reason why I would not recommend using the type ahead as you are suggesting is that users will not know what version of Country name you are using.

    For instance “United Kingdom” or “Great Britain” (there are plenty more examples of this).

    People typing “Great” would be very confused if your version was “United Kingdom”.

    I recommend staying with the simple drop down for now and then hope that users smarten up and learn that they can type for quick access inside that instead.

    • Anthony

      Sep 23rd, 2010

      I think the enhanced usability experience provided by text suggestion boxes will win in almost every scenario.

      It’s quite easy to code variations of a country into a result set, especially if it is text suggestion box and not a drop down list where users might actually see both variations.

      Why can’t Great Britain and United Kingdom both be in the result set? One could be an alias for another.

      If you typed “do” wouldn’t it be safe to say you weren’t looking for “Denmark”? Either way the delete button is not far away.

      Now that Google Suggest has transformed into Google Instant, I expect we will see a marked increase of text suggestion boxes, especially in scenarios where results are displayed.

      • Paul

        Dec 10th, 2010

        Because UK and GB cover different things.
        Great Britain is England, Wales & Scotland
        The United Kingdom of Great Britain and Northern Ireland covers England, Wales, Scotland and Northern Ireland.

        • x01dev

          Mar 7th, 2015

          How do you show them with a dropdown? You can do the same with a suggest box. That’s just a non-issue.

  4. chris

    Sep 27th, 2010

    What toolkits have you used that provide this functionality? We are using GWT and have just started to explore improvements of this nature…..

  5. Hartmut

    Jan 5th, 2011

    I have to agree with Soren.

    The Solution presented here is simply solving a problem that one operating system (Mac) creates.
    On other Os you simply bring the focus on any drop-down menu and type. The result is similar to the suggestion box.

    The downside of the suggestion box is that the user need to know in advance what format he should be typing. Countries can be in several languages. Germany or Deutschland for example. Having a list presented with the available choices is a good user interaction.

    Having to guess or god beware think is an obstacle for the user.

    A good UI lets the system do the work and not the user.

    • x01dev

      Mar 7th, 2015

      I don’t get why you’re forcing to find issues on something so simple. Simply put, if a website uses English language then the suggest box will show English country names, if it uses German language it’ll show German country names and so on.

      Do dropdowns show China, Zhōngguó, Deutschland, Germany, Italy, Italia…? Fine. Then I don’t see the issue with a suggest box showing the same things.

      I would say to keep both the suggest box and select and put a placeholder telling there are both.

Leave a Comment