Как создать поле с автозаполнением autocomplete в формах Tilda
Оставить заявку на доставку
Введите Ваш телефон и удобную станцию метро
Доставка
Бесплатно до ближайшей станции метро

Как создать поле с автозаполнением autocomplete в формах Tilda

1
Добавили на страницу блок Обложка ► CR32N
2
Добавили в него 2 поля:
- Телефон
- Поле для ввода в одну строку и задали ему имя переменной mymetroinput
3
Добавили скрипт на страницу
Скрипт вставляется в блок ДРУГОЕ►Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Добавляем возможность подстановки списка похожих наименований при вводе данных в поле формы.
Длительность видео: 14 мин
Фрагмент видео
Библиотека для примера

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/sunny/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
 $( document ).ready(function() {
  setTimeout(function() {
  $('[name="mymetroinput"]').addClass('tags');
  $( function() {
//Создаём массив данных для нашего списка подставновки
    var availableTags = [
"Авиамоторная" ,
"Автозаводская (14 линия)" ,
"Автозаводская (Замоскворецкая линия)" ,
"Академическая" ,
"Алексеевская" ,
"Алма-Атинская" ,
"Алтуфьево" ,
"Андроновка" ,
"Аннино" ,
"Арбатская (Арбатско-Покровская линия)" ,
"Арбатская (Филевская линия)" ,
"Аэропорт" ,
"Бабушкинская" ,
"Багратионовская" ,
"Балтийская" ,
"Баррикадная" ,
"Бауманская" ,
"Беговая" ,
"Белокаменная" ,
"Белорусская" ,
"Беляево" ,
"Бибирево" ,
"Библиотека им. Ленина" ,
"Битцевский парк" ,
"Борисово" ,
"Боровицкая" ,
"Ботанический сад" ,
"Ботанический сад (14 линия)" ,
"Братиславская" ,
"Бульвар Адмирала Ушакова" ,
"Бульвар Дмитрия Донского" ,
"Бульвар Рокоссовского" ,
"Бунинская аллея" ,
"Бутырская" ,
"Варшавская" ,
"ВДНХ" ,
"Верхние Котлы" ,
"Владыкино" ,
"Владыкино (14 линия)" ,
"Водный стадион" ,
"Войковская" ,
"Волгоградский проспект" ,
"Волжская" ,
"Волоколамская" ,
"Воробьевы горы" ,
"Выставочная" ,
"Выставочный центр" ,
"Выхино" ,
"Деловой центр" ,
"Деловой центр (МЦК)" ,
"Динамо" ,
"Дмитровская" ,
"Добрынинская" ,
"Домодедовская" ,
"Достоевская" ,
"Дубровка" ,
"Дубровка (14 линия)" ,
"Жулебино" ,
"ЗИЛ" ,
"Зорге" ,
"Зябликово" ,
"Измайлово" ,
"Измайловская" ,
"Калужская" ,
"Кантемировская" ,
"Каховская" ,
"Каширская" ,
"Киевская" ,
"Китай-город" ,
"Кожуховская" ,
"Коломенская" ,
"Комсомольская" ,
"Коньково" ,
"Коптево" ,
"Котельники" ,
"Красногвардейская" ,
"Краснопресненская" ,
"Красносельская" ,
"Красные Ворота" ,
"Крестьянская застава" ,
"Кропоткинская" ,
"Крылатское" ,
"Крымская" ,
"Кузнецкий мост" ,
"Кузьминки" ,
"Кунцевская" ,
"Курская" ,
"Кутузовская" ,
"Ленинский проспект" ,
"Лермонтовский проспект" ,
"Лесопарковая" ,
"Лихоборы" ,
"Локомотив" ,
"Ломоносовский проспект" ,
"Лубянка" ,
"Лужники" ,
"Люблино" ,
"Марксистская" ,
"Марьина роща" ,
"Марьино" ,
"Маяковская" ,
"Медведково" ,
"Международная" ,
"Менделеевская" ,
"Минская" ,
"Митино" ,
"Молодежная" ,
"Мякинино" ,
"Нагатинская" ,
"Нагорная" ,
"Нахимовский проспект" ,
"Нижегородская" ,
"Новогиреево" ,
"Новокосино" ,
"Новокузнецкая" ,
"Новослободская" ,
"Новохохловская" ,
"Новоясеневская" ,
"Новые Черемушки" ,
"Окружная" ,
"Октябрьская" ,
"Октябрьское поле" ,
"Орехово" ,
"Отрадное" ,
"Охотный ряд" ,
"Павелецкая" ,
"Панфиловская" ,
"Парк Культуры" ,
"Парк Победы" ,
"Партизанская" ,
"Первомайская" ,
"Перово" ,
"Петровский парк" ,
"Петровско-Разумовская" ,
"Печатники" ,
"Пионерская" ,
"Планерная" ,
"Площадь Гагарина" ,
"Площадь Ильича" ,
"Площадь Революции" ,
"Полежаевская" ,
"Полянка" ,
"Пражская" ,
"Преображенская площадь" ,
"Пролетарская" ,
"Проспект Вернадского" ,
"Проспект Мира" ,
"Профсоюзная" ,
"Пушкинская" ,
"Пятницкое шоссе" ,
"Раменки" ,
"Речной вокзал" ,
"Рижская" ,
"Римская" ,
"Ростокино" ,
"Румянцево" ,
"Рязанский проспект" ,
"Савеловская" ,
"Саларьево" ,
"Свиблово" ,
"Севастопольская" ,
"Семеновская" ,
"Серпуховская" ,
"Славянский бульвар" ,
"Смоленская (Арбатско-Покровская линия)" ,
"Смоленская (Филевская линия)" ,
"Сокол" ,
"Соколиная гора" ,
"Сокольники" ,
"Спартак" ,
"Спортивная" ,
"Сретенский бульвар" ,
"Стрешнево" ,
"Строгино" ,
"Студенческая" ,
"Сухаревская" ,
"Сходненская" ,
"Таганская" ,
"Тверская" ,
"Театральная" ,
"Текстильщики" ,
"Телецентр" ,
"Теплый Стан" ,
"Технопарк" ,
"Тимирязевская" ,
"Третьяковская" ,
"Тропарево" ,
"Трубная" ,
"Тульская" ,
"Тургеневская" ,
"Тушинская" ,
"Угрешская" ,
"Улица 1905 года" ,
"Улица Академика Королёва" ,
"Улица Академика Янгеля" ,
"Улица Горчакова" ,
"Улица Милашенкова" ,
"Улица Сергея Эйзенштейна" ,
"Улица Скобелевская" ,
"Улица Старокачаловская" ,
"Филевский парк" ,
"Фили" ,
"Фонвизинская" ,
"Фрунзенская" ,
"Хорошево" ,
"Хорошевская" ,
"Царицыно" ,
"Цветной бульвар" ,
"ЦСКА" ,
"Черкизовская" ,
"Чертановская" ,
"Чеховская" ,
"Чистые пруды" ,
"Чкаловская" ,
"Шаболовская" ,
"Шелепиха" ,
"Шипиловская" ,
"Шоссе Энтузиастов" ,
"Щелковская" ,
"Щукинская" ,
"Электрозаводская" ,
"Юго-Западная" ,
"Южная" ,
"Ясенево"

    ];
    
    $( ".tags" ).autocomplete({
      source: availableTags
    });
  });
 }, 3000);

});   
   
  </script>

<style>
/*Настройкм фона выпадающего списка*/
    .ui-widget-content {
    border: 1px solid #8e846b !important;
    background: #ffefe1  !important;
    color: #5d5d5d !important;
}
.ui-front {
    z-index: 9999999 !important;
}
/*Настройкм элементов при выделении*/
  .ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border: 1px solid #655e4e;
	background: #ffffff url(images/ui-bg_inset-soft_30_ffffff_1x100.png) 50% 50% repeat-x;
	font-weight: 300 !important;
	color: #000000  !important;
}
</style>
Made on
Tilda