How to disable autocomplete in address fields for Safari?

Question

I have a form where I've implemented an autosuggest dropdown (via jQueryUI) so that a user can search for a contact in our app and have their information auto-filled. I want autocomplete to be disabled on the form, but Safari (on macOS) is ignoring autocomplete="off". I have specified autocomplete to be off on the input fields, as well as in the <form> tag. This form is for a physical mailing address for a friend, and Safari is showing matching contacts from Contacts.app... but it is overlaying a dropdown on top of my autosuggest dropdown. How do I force Safari to stop showing this dropdown?

<form accept-charset="UTF-8" action="/listings/sailing/create_customized_card" autocomplete="off" class="new_greeting_card" id="new_greeting_card" method="post">
...
  <li>
    <input autocomplete="off" autocorrect="off" class="validate required" id="to_name" name="delivery[to_name]" placeholder="First &amp; last name" size="30" type="text" />
  </li>
  <li>
    <input autocomplete="off" autocorrect="off" class="validate required" id="to_address_street_1" name="to_address[street_1]" placeholder="Street 1" size="30" type="text" />
  </li>
  <li>
    <input autocomplete="off" autocorrect="off" id="to_address_street_2" name="to_address[street_2]" size="30" type="text" />
  </li>
  <li>
    <input autocomplete="off" class="validate required city" id="to_address_city" name="to_address[city]" placeholder="City" size="30" type="text" />
    <select class="validate required state" id="to_address_state" name="to_address[state]">
    <option value="AK">AK</option>
    ...
    </select>
    <input autocomplete="off" class="validate required zip" id="to_address_zip_code" name="to_address[zip_code]" pattern="(\d{5}([\-]\d{4})?)" placeholder="Zip" size="30" type="text" />
  </li>
...
</form>

FYI - I know that most browsers ignore autocomplete="off" for username and password fields, but these are address fields for a contact.

Answer 1

It seems you can't disable autocomplete in a similar way. Safari looks for certain keywords in the id of the element and if there is something like "name", "address", "e-mail" etc., it enables the autocomplete function (tested on Safari 10.1.1).
So, the only simple workaround that I've found is to use a different id that doesn't trigger the autocomplete function.

EDIT: I found out that Safari also uses the placeholder attribute to determine whether to enable autocomplete function or not.

Answer 2

Just to add one wrinkle to the other fine answers...

I found empirically that Safari get its hints from a) the name of the field, b) the associated label, or c) adjacent text. It figures out things like field names "name", "firstname", "lastname", and labels or adjacent text like "name", "First name", "Last name".

In my application, it was competing with a custom autofill. I defeated my dropdown as follows:

I changed my field name from xx_firstname to mxyzptlk, and the label from First Name to F‌irst N‌ame. The ‌ character is a zero width non-joiner. You can't see it on the screen, but it appears to defeat Safari - at least for now!