If you’re finding that customers are entering cities or locations on your website form, but what they’re submitting is full of errors such as typos, misspellings or abbreviations, you might want to consider using a city autocomplete.

Here's my quick guide and 3 tips to improving the UX of your city input fields.

How does it work?

Rather than having to type a city manually (which can be a pain on a mobile), a city autocomplete works by suggesting cities or locations as soon as you click into a field or start typing.

Most users will find their city in a handful of keystrokes, and if you enable location biasing many will be able to autofill their city without typing anything at all.

Swiftcomplete Places city autocomplete with location biasing towards Nottingham

What are the benefits of a city autocomplete?

You can standardise the data that’s being submitted, so you won’t have a database containing multiple spellings and variations of the same city names. This will be really useful if you need to create reports or analyse your data in future, for example counting the number of orders per city
It encourages the customer to complete that part of the form more quickly, speeding up the whole form-filling process and giving an enhanced user experience, which means they’re more likely to finish the whole form
By showing only relevant options, you can avoid the chance of the customer picking a city from a different country or region by mistake (we’re looking at you Birmingham, UK and Birmingham, Alabama!)

Tip 1: Increase relevance by prioritising nearby cities

Location biasing can be used within a city autocomplete to automatically favour results which are nearer a particular location, and put those results at the top of the list. This usually means that the nearest (and therefore most relevant) cities or locations appear more quickly and with fewer keystrokes needed.

One option for location biasing is IP biasing, which would put cities or locations which are nearest the customer’s IP address at the top of the list.

Another option is for you to specify a particular location, such as your company’s office or your most popular delivery area, and prioritise displaying cities which are nearest to that location. The location biasing option that works best for your website will depend on your business type and what your website form is used for.

Choose between IP biasing or pinpoint location biasing

Tip 2: Restrict city suggestions to specific countries

Often you'll only want your users to find cities in certain countries.

Let's assume that we only want our users to select cities in the UK. There are two ways of doing this:

Limit countries - You can specify a list of countries that you want to be able to search in, and anywhere else won't appear in the results
Alert / prompting - Let your users search for any city in any country, and warn them or prevent the form from being submitted if the country is incorrect

There are pros and cons to both approaches, and the best way will depend on how you've set up your form.

Limiting countries can make it faster to find a city, because you're excluding places in other countries that may otherwise have appeared first.

Letting the user search for their city and then prompting them can be less confusing, but may require you to make alterations to your form.

Select the countries that you want to return in the city autocomplete

Tip 3: Autofill the city & state or country at the same time

When you find a city with the Swiftcomplete Places API, you'll also receive other information, such as:

State / Province / County
Region
Country name
Coordinates

If you have these fields on your form, you can autofill them at the same time and reduce the amount of fields that your user has to complete.

Using Swiftcomplete Places to populate city, state, country and coordinates for New York

Get started

Using Swiftcomplete Places as a city autocomplete on your website form could improve your data quality and help your customers find the city or location they need within as little as one or two keystrokes.

It’s really quick and easy to get started - you can attach Places to an existing textbox on your site with a simple copy & paste integration.