Image via istockphoto
John Reed

Written by John Reed

Share

While working on a recent feature leveraging jQuery UI’s Autocomplete widget, we stumbled across an interesting issue with Google Chrome and its support (or lack thereof, depending on your perspective) of the HTML5 autocomplete attribute.

The problem was that Chrome would continue to use the browser’s native autofill feature to offer suggestions for an input, obscuring our own autocomplete UI even when we explicitly set our input’s autocomplete parameter to “off”.

It turns out this is quite a contentious issue between the Chromium team and seemingly every developer who weighed in on the subject. To summarize, one would expect the following to prevent a browser’s autofill feature from working:

<input type="text" autocomplete="off">

And while some browsers (including older versions of Chrome) do in fact honor this attribute, Chrome takes a very nuanced stance and, for all intents and purposes, this no longer works as developers expect.

An Elegant Solution

We ran into a bevy of interesting JavaScript and CSS display hacks to get around Chrome’s implementation, but we wanted an elegant solution that didn’t require useless markup and could be easily deployed on multiple inputs. The answer was simple (and arguably semantic):

<input type="search">

Lucky for us, Chrome doesn’t impose its autofill feature on search inputs, no matter what the name attribute’s value is. We liked this solution for its simplicity, and one could argue that a user interacting with an autocomplete input is searching for something (even if they don’t know it until we offer suggestions).

One Last Thing

Webkit browsers (Chrome, Safari, et al) apply their own styles to search inputs, but this can be easily overridden with a bit of CSS:

input[type="search"] {
    -webkit-appearance: textfield;
    }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    }

Questions?

Browser issues got you down? Contact us or let us know in the comments!

Tags
AutocompleteChromeHTML5jQuery