Как подключить всплывающие «Подсказки» к форме в «Flexbe»

У «Flexbe» нет интеграции с сервисами подсказок: нужны навыки программирования, чтобы подключить их к форме ввода. Но мы подготовили шаблон кода от сервиса «DaData», который решает эту проблему. Вам нужно лишь скопировать данный текст на сайт, заменить несколько слов, и подсказки по ФИО и адресам заработают в «Flexbe».

Для примера мы собрали в «Flexbe» форму из трех полей: Имя, Email и адрес. В статье подключим к этим полям автодополнение — всплывающие подсказки.

1. Перейти в раздел «Настройки» – «Вставка кода». Перед закрывающим тегом </body> вставить следующий код:

2. Под нашей формой добавим HTML элемент. Во вкладках HTML и CSS все удаляем, а на вкладке JavaScript вставляем код:

$("#1234-0000").suggestions({
   token: "ВАШ_API_КЛЮЧ",
   type: "ТИП_ПОДСКАЗОК",
    /* Вызывается, когда пользователь выбирает одну из подсказок */
onSelect: function (suggestion) {
   console.log(suggestion);
   }});
$("#1234-0000").suggestions({
   token: "ВАШ_API_КЛЮЧ",
   type: "ТИП_ПОДСКАЗОК",
    /* Вызывается, когда пользователь выбирает одну из подсказок */
onSelect: function (suggestion) {
   console.log(suggestion);
   }});
$("#1234-0000").suggestions({
   token: "ВАШ_API_КЛЮЧ",
   type: "ТИП_ПОДСКАЗОК",
    /* Вызывается, когда пользователь выбирает одну из подсказок */
onSelect: function (suggestion) {
   console.log(suggestion);
   }});

3. Теперь нужно скопировать API-ключ из личного кабинета DaData и подставить в код — вместо слов «ВАШ_API_КЛЮЧ».

Перечень типов «Подсказок»:

по адресам — «ADDRESS»;
ФИО — «NAME»;
организациям — «PARTY»;
банкам — «BANK»;
емейлам — «EMAIL»;
ФИАС — «FIAS»;
местам выдачи паспорта — «fms_unit»;
почтовым отделениям — «postal_unit»;
налоговым инспекциям — «fns_unit»;
таможням — «fts_unit»;
мировым судам — «region_court»;
станциям метро — «metro»;
маркам автомобилей — «car_brand»;
товарам и услугам — «mktu»;
странам — «country»;
валютам — «currency»;
ОКВЭД — «okved2»;
ОКПД — «okpd2»;
ОКТМО — «oktmo».

Нужный тип «Подсказок» следует подставить в код — вместо слов «ТИП_ПОДСКАЗОК».

Вместо 1234-0000 нужно указать id поля из вашей формы, посмотреть id поля можно кликнув правой кнопкой мыши по полю в форме и нажать Посмотреть код.
Скопируйте id по примеру: <input type="text" class="form-field-text__input" id="992448758-273045" name="fields[273045][value]" autocomplete="on" data-check="name">

После сохранения можно протестировать работу подсказок.

Как к «Flexbe» подключить сервис DaData.ru