Дискретные подсказки для адреса
Возможности Ахантера по формированию подсказок позволяют упростить и существенно ускорить процесс ввода почтовых адресов. По нашим оценкам, использование подсказок от Ахантера ускоряет ввод адреса примерно в 5 раз, при этом число ошибок, допущенных при вводе, сводится к нулю.
При использовании подсказок полагается, что приложение пользователя или веб-сайт содержит некоторую форму, в которой есть поле для ввода почтового адреса. Например, большинство интернет-магазинов требуют от покупателей заполнить такую форму, когда оформляется заказ. Правильно ввести почтовый адрес не всегда оказывается просто, поэтому для экономии времени часто люди его вводят не полностью и используют нестандартные сокращения.
Чтобы вы могли организовать комфортный ввод почтовых адресов у себя в приложении или на сайте, мы сделали в Ахантере специальную функцию, занимающуюся формированием подсказок. Данная функция предлагает по уже введённому фрагменту адреса возможные варианты для ввода его остальной части. Пользователю при этом нужно лишь выбрать один из предложенных вариантов.
Приведенная ниже форма демонстрирует работу данной функции. Для отображения подсказок достаточно начать вводить почтовый адрес в следующее поле.
Здесь для отображения подсказываемых адресов используется наш JavaScript-модуль ahunter_suggest.js, скачать его можно по следующей ссылке. Модуль использует библиотеку jQuery, поэтому, чтобы запустить подсказки у вас на сайте, в дополнение к ahunter_suggest.js нужно будет установить свежую версию jQuery.
Чтобы всё это заработало, мы использовали здесь следующий JavaScript-код.
//готовим опции модуля var options = { id : 'js-AddressField' }; //запускаем модуль AhunterSuggest.Address.Solid( options );
Детальное описание этого кода, а также описание подготовки вашего сайта к использованию подсказок приводится далее в этой статье.
В большинстве случаев для работы с подсказками бывает достаточно использовать модуль ahunter_suggest.js. Однако если вам нужно встроить подсказки в отдельное приложение, либо если у вас есть своё JavaScript решение для отображения подсказок, то для получения подсказок от Ахантера нужно будет использовать напрямую его REST API. Соответствующее описание приводится во второй части данной статьи.
Для добавления наших подсказок на веб-сайт в первую очередь нужно подключить наш JavaScript-модуль. В хедере вашего сайта это должно выглядеть так.
<head> ... <script src="path_to_scripts/jquery.min.js"></script> <script src="path_to_scripts/ahunter_suggest.js"></script> ... </head>
Здесь мы полагаем, что у вас на веб-сервере есть папка path_to_scripts, в которой лежат JavaScript-скрипты вашего сайта. Также мы полагаем, что в этой папке у вас уже лежит свежая версия jQuery в виде минифицированного файла jquery.min.js, а также свежая версия нашего модуля подсказок ahunter_suggest.js.
Чтобы подсказки хорошо отображались, в таблице стилей вашего сайта нужно определить следующие классы стилей.
.u-AhunterSuggestions { border: 1px solid #AAAAAA; background: white; overflow: auto; border-radius: 2px; }
.u-AhunterSuggestion { padding: 5px; white-space: nowrap; overflow: hidden; }
.u-AhunterEmptySuggestion { padding: 5px; font-style: italic; color: #b8661f; }
.u-AhunterSelectedSuggestion { background: #E7E7E7; }
.u-AhunterSuggestions strong { font-weight: bold; color: #1B7BB1; }
Чтобы запустить подсказки, на вашем сайте также должна присутствовать форма с полем для ввода почтового адреса. Этому полю должен быть присвоен идентификатор, чтобы по нему наш модуль ahunter_suggest.js смог найти это поле на странице и запустить для него подсказки. Например, в простейшем случае HTML-разметка с таким полем может иметь следующий вид.
<div> <input id="js-AddressField" placeholder="Введите адрес"> </div>
Теперь, чтобы запустить подсказки, достаточно где-нибудь на странице добавить следующий инициализирующий скрипт:
<script> //готовим настройки модуля var options = { id : 'js-AddressField' }; //запускаем модуль подсказок AhunterSuggest.Address.Solid( options ); </script>
Здесь выполняется заполнение опций options, которые затем передаются модулю подсказок посредством вызова AhunterSuggest.Address.Solid( options ). Этот вызов привяжет функционал подсказок к полю с идентификатором js-AddressField, после чего ввод почтовых адресов в этом поле будет приводить к отображению подсказок.
Объект options, через который передаётся идентификатор поля, для которого будут формироваться подсказки, позволяет указать и другие опции, влияющие на поведение и внешний вид подсказок. Рассмотрим их подробнее.
Данный набор опций применяется в том случае, если вы используете подсказки для почтового адреса, который вводится в одно поле. Если адрес вводится в несколько разных полей, набор опций будет немного другой, он описан в соответствующей статье здесь.
Для адреса, вводимого в одно поле, в опциях объекта options {...} можно передавать следующие параметры.
var options =
{
...,
empty_msg : '',
...
};
var options = { ... api_options : { output : "afiasall" } ... }Данная опция включит в выдачу информацию о ФИАС и ГАР-кодах для всех полей выбранного адреса, а не только для одного, последнего, поля. Полный перечень этих опций представлен здесь.
Ниже приведён пример инициализации модуля подсказок для почтового адреса, вводимого в одно поле, с помощью дополнительных параметров.
//Готовим опции для модуля подсказок var options = { //Наше поле, куда пользователи будут вводить почтовые адреса id: "js-AddressField", //Веб-адрес облачной версии сервиса ahunter_url : "https://ahunter.ru/", //Не будем показывать предупреждающее сообщение, когда подсказок нет empty_msg : "", //Будем показывать только 5 топовых подсказок limit : 5, //Не будем показывать подсказки при возврате фокуса в поле ввода suggest_on_focus : false, //При выборе подсказки будем выводить её в отладочную консоль on_fetch : function( Suggestion, Address ) { console.log( Suggestion, Address ); }, //Указываем свой открытый API-токен, чтобы работал on_fetch user : "demotoken", //Будем запрашивать подсказки для адресов Казахстана country : "kaz", //В on_fetch будем получать коды ФИАС для всех полей выбранного адреса api_options : { output : "afiasall" } }; //Запускаем модуль подсказок AhunterSuggest.Address.Solid( options );
После выполнения этой инициализации всякий раз, когда пользователи будут вводить адреса в поле js-AddressField, на экране будут появляться подсказки с подходящими почтовыми адресами.
Если вам нужно встроить подсказки для почтовых адресов не на веб-сайте, а в ваше приложение, либо если вы по каким-то причинам не можете подключить наш JavaScript-модуль подсказок ahunter_suggest.js, то в этом случае вам следует напрямую использовать API-команду suggest/address нашего сервиса для запроса и получения подсказок для вводимого пользователем почтового адреса.
Использование команды suggest/address полагает, что адрес вводится пользователем в режиме реального времени. Каждый раз, когда пользователь вводит очередной символ целевого почтового адреса, увеличивается количество информации, на основе которой сервис может сформировать подсказки для остальной части адреса.
Поэтому при вводе пользователем каждого нового символа ваше приложение должно отсылать сервису новый запрос, дополненный этим новым символом, чтобы получить подсказки, учитывающие уже введенную информацию в полном объеме.
Для организации такого взаимодействия ваше приложение должно отслеживать события, возникающие, когда происходят изменения в поле формы, куда вводится почтовый адрес. При возникновении такого события приложение должно отсылать текст, введенный к настоящему моменту в этом поле, в виде запроса сервису для получения подсказок для остальной еще не введенной части адреса.
Получив ответ от Ахантера, ваше приложение должно извлечь из него предложенные подсказки и показать их пользователю, предоставив тем самым возможность выбрать подходящий почтовый адрес.
После того, как пользователь выбрал подходящую подсказку, ваше приложение может запросить у Ахантера полную информацию об этом адресе, например, его географические координаты или коды по справочникам ФИАС и КЛАДР. Для этого каждая подсказка снабжается уникальным идентификатором-сигнатурой. Когда пользователь вашего приложения выбирает подсказку, ваше приложение может брать соответствующую ей сигнатуру и отсылать её с помощью команды fetch/address. В качестве ответа сервис вернёт структурированный адрес с полной информацией о нём.
Приведенный ниже запрос отсылает сервису фрагмент введенного адреса "мос", введенный к настоящему моменту пользователем, по которому сервис должен сформировать подсказки для заполнения остальной части адреса.
В данном запросе используются следующие параметры.
Рассмотрим более подробно все параметры, которые сервис может получать в рамках данной команды.
Обязательные параметры для выполнения запроса.
Опциональные параметры
Приведенный ниже запрос отсылает сервису на обработку фрагмент адреса "москва ул" с дополнительными параметрами.
В данном запросе используются следующие параметры.
Ниже приведен ответ сервиса с результатом формирования подсказок по фрагменту адреса "ангарск ул Б". Полагается, что пользователь вводит некий адрес, принадлежащий городу Ангарск, так что в настоящий момент введено название города, и пользователь начинает вводить название улицы в пределах него, начинающееся на букву "Б".
Результирующий JSON-ответ получен с использованием опции output=json|pretty, позволяющей выполнить "красивое" форматирование JSON-текста.
{ "query" : "ангарск ул Б", "request_process_time" : 0, "suggestions" : [ { "value" : "обл Иркутская, г Ангарск, ул Бабушкина, ", "sign" : "38c4s65526", "zip" : "665809" }, { "value" : "обл Иркутская, г Ангарск, ул Баумана, ", "sign" : "38c4s65527", "zip" : "665809" }, { "value" : "обл Иркутская, г Ангарск, ул Белорусская, ", "sign" : "38c4s65523", "zip" : "665809" }, { "value" : "обл Иркутская, г Ангарск, ул Береговая, ", "sign" : "38c4s65524", "zip" : "665806" }, { "value" : "обл Иркутская, г Ангарск, ул Блудова, ", "sign" : "38c4s336", "zip" : "665826" }, { "value" : "обл Иркутская, г Ангарск, ул Боткина, ", "sign" : "38c4s274", "zip" : "665821" }, { "value" : "обл Иркутская, г Ангарск, ул Бульварная, ", "sign" : "38c4s113", "zip" : "665824" }, { "value" : "обл Иркутская, г Ангарск, ул Богдана Хмельницкого, ", "sign" : "38c4s264", "zip" : "665821" }, { "value" : "обл Иркутская, г Ангарск, мкр Байкальск, ул Боткина, ", "sign" : "38c4p1s9", "zip" : "665821" } ] }
Результатом формирования подсказок для вводимого адреса является JSON-объект со следующими элементами.
Ниже приведено детальное описание этих элементов.
Поскольку при формировании подсказок полагается, что адрес введен не полностью, вариантов завершения написания вводимого адреса в общем случае может быть несколько. Каждый из вариантов завершения вводимого адреса является подсказкой для пользователя, которую тот может выбрать в качестве целевого вводимого адреса. Каждому предлагаемому сервисом варианту соответствует отдельный элемент JSON-массива suggestions. Количество предлагаемых вариантов может лимитироваться с помощью опционального параметра addresslim, передаваемого в рамках запроса.
Пример JSON-объекта, соответствующего одному варианту подсказок для вводимого адреса приведен ниже.
{ "value" : "обл Иркутская, г Ангарск, ул Бабушкина, ", "sign" : "38c4s65526", "zip" : "665809" }
Каждый элемент массива suggestions представляет собой JSON-объект со следующими элементами.
Поскольку формирование подсказок происходит в режиме реального времени, никакой дополнительной информации по каждой подсказке сервис не возвращает. Это обусловлено необходимостью минимизировать сетевой трафик и время отклика сервиса.
Чтобы получить исчерпывающую информацию по итоговому адресу, который выбрал из предложенных подсказок пользователь, вашему приложению или веб-сайту следует использовать команду fetch/address, которая позволяет получить адрес по его сигнатуре.
В случае если пользователь ввёл адрес самостоятельно без выбора предложенной подсказки, то полную информацию о таком адресе можно получить с помощью команды cleanse/address.
Здесь и далее приводится описание ответа сервиса в случае использования формата XML. По существу возвращаемые в XML-ответе элементы имеют аналогичное назначение JSON-элементам, описанным выше. Для получения ответа в формате XML необходимо в исходном запросе использовать значение параметра output=xml.
XML-ответ сервиса в результате формирования подсказок по фрагменту адреса "ангарск ул Б" имеет следующий вид.
<ProcessSuggestResult> <Suggestion val="обл Иркутская, г Ангарск, ул Бабушкина, " zip="665809" sign="38c4s65526"/> <Suggestion val="обл Иркутская, г Ангарск, ул Баумана, " zip="665809" sign="38c4s65527"/> <Suggestion val="обл Иркутская, г Ангарск, ул Белорусская, " zip="665809" sign="38c4s65523"/> <Suggestion val="обл Иркутская, г Ангарск, ул Береговая, " zip="665806" sign="38c4s65524"/> <Suggestion val="обл Иркутская, г Ангарск, ул Блудова, " zip="665826" sign="38c4s336"/> <Suggestion val="обл Иркутская, г Ангарск, ул Боткина, " zip="665821" sign="38c4s274"/> <Suggestion val="обл Иркутская, г Ангарск, ул Бульварная, " zip="665824" sign="38c4s113"/> <Suggestion val="обл Иркутская, г Ангарск, ул Богдана Хмельницкого, " zip="665821" sign="38c4s264"/> <Suggestion val="обл Иркутская, г Ангарск, мкр Байкальск, ул Боткина, " zip="665821" sign="38c4p1s9"/> <Query val="ангарск ул Б"/> </ProcessSuggestResult>
Результатом формирования подсказок для вводимого адреса является XML-документ со следующими дочерними элементами.
Ниже приведено детальное описание этих XML-элементов.
Элемент Suggestion содержит информацию об одной подсказке из предложенного сервисом перечня подсказок по вводимому адресу. Пример данного элемента приведен ниже.
<Suggestion val="обл Иркутская, г Ангарск, ул Бабушкина, " zip="665809" sign="38c4s65526"/>
Данный элемент содержит следующие атрибуты.