如何在Safari的地址欄中禁用自動完成功能？

Question

我有一個表單，我已經實現了一個autosuggest下拉菜單（通過jQueryUI），以便用戶可以在我們的應用程序中搜索聯繫人並讓他們的信息自動填充。我希望窗體上禁用自動完成，但Safari（在macOS上）忽略autocomplete="off"。我在輸入欄中指定了自動完成功能，並在<form>標記中指定了自動完成功能。此表單適用於朋友的實際郵寄地址，而Safari則顯示來自Contacts.app的匹配聯繫人...但它覆蓋在我的自動提示下拉列表的頂部。我如何強制Safari停止顯示此下拉菜單？

<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> 

僅供參考 - 我知道，大多數瀏覽器會忽略autocomplete="off"用戶名和密碼字段，但這些聯繫人地址字段。

Answer 1

看來你不能以類似的方式禁用自動完成功能。 Safari會在元素的id中查找某些關鍵字，如果有「名稱」，「地址」，「電子郵件」等內容，它會啓用自動完成功能（在Safari 10.1.1上測試）。
因此，我找到的唯一簡單解決方法是使用不會觸發自動完成功能的不同id。

編輯：我發現Safari也使用placeholder屬性來決定是否啓用自動完成功能。