Last Updated: 2024-04-25

I wanted to autocomplete the street field for a calculator, populating using a specific list of streets that were known to have corresponding values in the database. (The backend could not tolerate misspelling of streets.)

The problem I first encountered was that Chrome kept filling in the street names that the user had already entered in as their saved addresses (some of which were idiosyncratic and therefore unsupported spellings).

I did some work to disable autocomplete

<form autocomplete="off" method="post" action="">
<input autocomplete="false" name="street" type="text">

Unfortunately this did not stop the issue. This is because the autocomplete attribute only corresponds to Chrome remembering what goes in a field and guessing as you type. My issue was the sound-alike (but quite different) autofill, corresponding to a pre-filling of form fields when you load the page (at least in some browsers...)

The only way to disable this was to trick Chrome with misnamed labels and input tags (i.e not using common ones like street). Gross, right?

<label class="calculator_label">Street</label>
<!--First mislabeling-->
<label for="autofill_avoider_a" style="display: none;">
  Hidden label to mislead chrome autofill (which is distinct from autocomplete!)
</label>

<input name="autofill_avoider_a" autocomplete="off"/>