Как упростить ввод адреса на сайте. Подсказки dadata по адресу

Name: Как упростить ввод адреса на сайте. Подсказки dadata по адресу
Availability: InStock
Author: Falcon Space

Введите некоторый адрес и выберите вариант из списка

Пример - г Москва, Волоколамское шоссе, д 88 к 5 стр 5, кв 66

Описание, как реализовать

Как внедрить:

HTML разметка (первое поле вводим, остальные поля заполняются автоматом из dadata):

<h3>Введите некоторый адрес и выберите вариант из списка</h3>
<input class="addr form-control" type="text" placeholder="Введите адрес">
<input class="addr0 form-control" type="text" placeholder="Полный адрес">
<input class="addr1 form-control" type="text" placeholder="Индекс">
<input class="addr2 form-control" type="text" placeholder="Страна">
<input class="addr3 form-control" type="text" placeholder="Город">
<input class="addr4 form-control" type="text" placeholder="Улица">
<input class="addr5 form-control" type="text" placeholder="Дом">
<input class="addr6 form-control" type="text" placeholder="Квартира">
<input class="addr10 form-control" type="text" placeholder="Координаты">

JS:

<link href="https://cdn.jsdelivr.net/npm/suggestions-jquery@21.6.0/dist/css/suggestions.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/suggestions-jquery@21.6.0/dist/js/jquery.suggestions.min.js"></script>
<script>
    $(".addr").suggestions({
        token: "____________TOKEN________________",
        type: "ADDRESS",
        onSelect: function(suggestion) {
          console.log("data", suggestion);
          $('.addr0').val(suggestion.unrestricted_value);
          $('.addr1').val(suggestion.data.postal_code);          
          $('.addr2').val(suggestion.data.country);
          $('.addr3').val(suggestion.data.city);
          $('.addr4').val(suggestion.data.street);
          $('.addr5').val(suggestion.data.house);
          $('.addr6').val(suggestion.data.flat);          
          $('.addr10').val(suggestion.data.geo_lat + ',' + suggestion.data.geo_lon);          
        }
    });
</script>

Детали API Dadata: https://dadata.ru/suggestions/usage/address/

Другие демостенды

— Как создать зависимые поля формы на сайте
— Примеры для заполнения формы на сайте. Подсказки для пользователя по полям формы
— Печать документа с сайта - генерация документа под печать (или в PDF) из HTML шаблона
— Dadata suggestions - примеры подсказок через поле формы типа dadata

Что есть в базе знаний по этой теме

— Видеочат. Интеграция с Vox Implant
— Внутренние SQL функции и процедуры
— Как сделать зависимые поля в форме (Страна, Город)
— Как показывать изменяющуюся информацию при изменении полей
— Интеграция API DaData.ru подсказки по адресам
— Внедрение подсказок dadata на сайт

В чем выгода для бизнеса?

Подсказки при вводе адреса через Dadata API ускоряют заполнение и гарантируют корректность. Адрес автоматически разбивается на компоненты. Вы улучшаете качество адресных данных и удобство для пользователей.