Блог

Главная - Вопросы по программированию - Как я могу добавить «синонимы» к элемента для автозаполнения браузера?

Как я могу добавить «синонимы» к элемента для автозаполнения браузера?

#javascript #html #forms #autofill

#javascript #HTML #формы #автозаполнение

Вопрос:

Я пытаюсь создать форму адреса, которая задает определенный формат (для серверной части), выглядит хорошо (для пользователя) и проста в заполнении (поддержка автозаполнения), но мне не очень повезло с <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=""> , но все равно столкнулся с той же проблемой.

Как я могу установить «синонимы» для автозаполнения, чтобы он автоматически выбирал правильный вариант?

Комментарии:

1. Проверка Shopify каким-то образом решила эту проблему с помощью javascript .. Не слишком уверен, что они делают.

Ответ №1:

У меня нет правильного ответа, но у меня есть альтернативный ответ.

Используйте ввод со списком данных

Вы можете переключить оператор select на значение an input и использовать list атрибут для указания на список данных. У datalist будут все ваши параметры. Автозаполнение все равно должно работать. Моей единственной заботой было бы проверить правильный адрес на серверной части.

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