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

Posted 2023-02-24

【中文标题】如何为浏览器的自动填充将“同义词”添加到 <select> 元素的 <option>？

【英文标题】：How can I add "synonyms" to a <select> element's <option> for the browser's AutoFill?

【发布时间】：2020-10-25 11:38:52

【问题描述】：

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

我在澳大利亚的不同州使用<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="">，但仍然遇到同样的问题。

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

【问题讨论】：

Shopify 结账已经通过 javascript 解决了这个问题。不太确定他们在做什么。

【参考方案1】：

我没有正确答案，但我有另一个答案。

将输入与数据列表一起使用

您可以将您的 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>