Image via istockphoto
John Reed

Written by John Reed

Share

While working on a recent feature leveraging jQuery UI’s Autocomplete widget, we encountered 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.”

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) 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. Still, 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">

Luckily, Chrome doesn’t impose its autofill feature on search inputs, no matter the name attribute’s value. 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).

Overriding Webkit Browser Styles

Webkit browsers (Chrome, Safari, et al.) apply their 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