How to best combine browser and custom autocomplete functionalities?

Question

When creating address forms, it is a common practice to provide autocomplete functionality for city and street names loaded from some external API. How to best combine this with built-in browser autocomplete="on"?

What I find on the internet forms mostly is just turning the functionality off, let's take gumtree.com website for an example:

I personally think it is an antipattern, as a user with his autocompletes settings set up to some extent - all rental, work, and home addresses added & used whenever possible.

---

What I think is a solution (didn't check if that actually works yet, it's just planning phase):

• custom autocomplete API call starts at 3 characters (city / street)
• focus on an empty input - browser autocomplete is on
• starts typing and reaches 3 characters - browser autocomplete turns off and is replaced by the custom one

What do you think of my approach? Do you have anything better in mind? Do you know any website where these functionalities are neatly combined?

Answer 1

It depends on your form and its purpose. For a case like gumtree, autocomplete may be an interesting proposition. For a real estate listing or travel website, less so, as people may be looking elsewhere.

You want to give your user heuristic shortcuts that they will likely want. In a case like retail, your current location and previous history are good predictors. Other values in autocomplete (e.g. work address, parents' home) may lead you astray.

Technically speaking I see a few other possible solutions than autocomplete that you can consider, namely geolocation and search history (for returning users).

You can even blend these two and incorporate them into an algorithm that autocomplete wouldn't allow:

• If I type "L" and I used "Liverpool" previously, it could automatically provide that as a first option;
• If I type "Lo" and I'm in currently in Northern Ireland, "Londonderry" could appear before "London".