如何为浏览器的自动填充的<select>元素的<option>添加“同义词”？

问题描述

我正在尝试制作一种地址格式，以强制使用特定格式（对于后端），看起来不错（对于用户）并且易于填写（支持自动填充），但是我运气不佳Safari（我们最受欢迎的浏览器）中<select>元素的自动填充功能。

我在不同的澳大利亚州使用<select>元素，以便格式保持一致。我还更喜欢将其显示为“新南威尔士州”，而将其显示为“新南威尔士州”，例如<option value="NSW">New South Wales</option>

<form>
  <input autocomplete="address-line1" maxlength="50" name="address-line1" placeholder="Line 1" type="text">
  <input autocomplete="address-line2" maxlength="50" name="address-line2" placeholder="Line 2" type="text">
  <input autocomplete="address-level2" maxlength="50" name="city" placeholder="Perth" type="text">
  <input autocomplete="postal-code" maxlength="10" name="postal_code" placeholder="6000" type="text">
  <select autocomplete="address-level1" name="state" required="">
    <option disabled selected="" value="">—</option>
    <option value="ACT">Australian Capital Territory</option>
    <option value="NSW">New South Wales</option>
    <option value="NT">northern Territory</option>
    <option value="QLD">Queensland</option>
    <option value="SA">South Australia</option>
    <option value="TAS">Tasmania</option>
    <option value="VIC">Victoria</option>
    <option value="WA">Western Australia</option>
  </select>
  <select autocomplete="country" name="country" required="">
    <option value="AU" selected="">Australia</option>
  </select>
  <button type="submit">Submit</button>
</form>

https://jsfiddle.net/1r5jsmtp/

问题是，当我向用户显示非缩写状态名称时，状态字段仅在用户还将其自动填充地址也设置为非缩写状态名称时自动填充，反之亦然。

无论他们在自动填充偏好设置中设置了“新南威尔士州”还是“新南威尔士州”，我都希望它自动填充。

我尝试设置选项标签<option label="">，但仍然遇到相同的问题。

如何设置自动填充的“同义词”，以便自动选择正确的选项？

解决方法

我没有正确的答案，但是我有一个替代答案。

使用带有数据列表的输入

您可以将select语句切换为input，并使用list属性指向数据列表。数据列表将具有所有选项。自动完成功能仍然可以使用。我唯一要担心的是测试后端的正确地址。

<input list=options autocomplete="address-level1" name="state" placeholder="State" required="">
<datalist id="options">
  <option value="ACT">Australian Capital Territory</option>
  <option value="NSW">New South Wales</option>
  <option value="NT">Northern Territory</option>
  <option value="QLD">Queensland</option>
  <option value="SA">South Australia</option>
  <option value="TAS">Tasmania</option>
  <option value="VIC">Victoria</option>
  <option value="WA">Western Australia</option>
</datalist>