Настройка автозаполнения. Autofill: чего не знают веб-разработчики, хотя должны знать. Покупки в интернете с помощью автозаполнения

Каждый день пользователям интернета приходится заполнять различные формы на сайтах, в интернет-магазинах. И это часто отнимает наше драгоценное время.

Возьмем, к примеру сайт одного туроператора. Как много полей, неправда ли?

Как много полей, неправда ли?

И надо сказать, что достаточно обременительно заходить в каждое и выбирать. Особенно, если приходится это делать несколько раз.

Ведь подбор тура по заданным вами параметрам не всегда есть в наличии и приходится корректировать уловия. Но если же вы определенно решили найти тур, который 100% соответствует вашим требованиям, и не смотря на то, что места есть не всегда, то всякий раз заново вводить одни и те же параметры для поиска будет достаточно рутинным занятием.

В этом поможет нам программа - конструктор скриптов, позволяющих автоматизировать любые действия в браузере, которая называется . Чтобы вы имели представление об этой программе, перечислю лишь базовый функционал.

• Автозаполнение форм и текстовых полей.
• Запись и повтор работы с любым элементом сайта.
• Сбор, сравнение, хранение и отправка данных.
• Есть встроенный планировщик задач, который можно запускать в назначенное вами время.
• Во время работы можно свернуть ее в систрэй. Это никак не скажется на производительности других приложений.

Как видите, даже этого достаточно, чтобы назвать программу функционально богатой.

А теперь, я на примере покажу, как можно автоматизировать процесс заполнения формы на сайте.

В адресную строку (выделено желтым маркером). Ниже, в правой части окна программы, подгружается веб-страница с формой для поиска и бронирования туров.

2. Выбираем в главном меню раздел «Макрос» и нажимаем на «Запись». Тоже самое можно сделать, нажав горячие клавиши Ctrl+Shift+R . Теперь программа будет записывать все наши действия в отдельный макрос.

Статья по теме: Какие есть сервисы рассылок

3. После того, как мы заполнили на сайте форму поиска тура и получили результат выборки, нужно остановить запись макроса. В том же пункте меню «Макрос» нажать на «Остановить» или выполнить эту команду, нажав горячие клавиши Ctrl+Shift+S .

4. Теперь, если нужно повторить поиск тура по указанным ранее параметрам, достаточно нажать все одну кнопочку «Выполнить». Макрос за считанные секунды сам заполнит все поля и вы тут же получите результаты поиска.

Как уже говорилось в анонсе этой заметки, при вводе в поле какого-либо значения пользователю предлагаются на выбор варианты. При нажатии на один из них, значение записывается в поле и пользователь может переходить к следующему. Посмотрите видео:

Данные для подстановки мы заранее указываем с помощью JavaScript. Затем активируем плагин для определенного поля.

Плюс решения в том, что можно использовать разные переменные для нескольких полей.

По идее, плагин автозаполнения призван заменить большие длинные списки на один маленький инпут.

Что касается страницы оформления заказа, то это может быть город доставки из списка доступных. Для формы поиска это могут быть наиболее популярные запросы, которые вы соберете через Яндекс.Метрику или статистику поиска по магазину .

Главная задача сводится к заполнению переменной данными, которые будут подставляться в поле формы.

Для этого мы воспользуемся JavaScript. Если вы не обладаете навыками программирования на этом языке, не расстраивайтесь, они вам не понадобятся. Просто следуйте инструкции. Откройте любой текстовый редактор, подойдет даже "Блокнот":

После готовности страницы, определим массив city и добавим в него список городов через запятую:

$(document).ready(function(){ var city = new Array("Москва", "Санкт-Петербург", "Хабаровск"); });

Как видите, все просто: данные указываются в кавычках через запятую. Их может быть много.

Не закрывайте и не сохраняйте файл в блокноте. В следующем пункте мы добавим в него инициализацию плагина.

В первую очередь необходимо скачать и подключить плагин. В данной статье говорится о версии . Чтобы подключить актуальную версию плагина, перейдите на сайт Autocomplete Plugin.

После того, как скачали скрипт, подключите его в шаблон той страницы, где располагается форма. В нашем примере это шаблон страницы служебных форм при условии ... . Перед закрывающим тегом добавьте:

Для корректного отображения нам понадобятся и CSS стили. Добавьте следующие стили в CSS интернет магазина:

Ac_results { padding: 0px; border: 1px solid black; background-color: white; overflow: hidden; z-index: 99999; } .ac_results ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0; } .ac_results li { margin: 0px; padding: 2px 5px; cursor: default; display: block; font: menu; font-size: 12px; line-height: 16px; overflow: hidden; } .ac_loading { background: white url("/img/indicator.gif") right center no-repeat; } .ac_odd { background-color: #eee; } .ac_over { background-color: #0A246A; color: white; }

Также добавьте в папку /img изображение indicator.gif .

Теперь давайте вернемся к нашему блокноту:

Теперь сохраняем наш файл. Я назвал его ac-city.txt. и задал кодировку UTF-8:

Конечно, мы не можем использовать файл с расширением.txt как скрипт, поэтому нажмите по кнопке "Переименовать" напротив файла и измените расширение на.js: