СоХабр закрыт.

С 13.05.2019 изменения постов больше не отслеживаются, и новые посты не сохраняются.

Автодополнение адреса для сайта, новые возможности в черновиках

У сервиса «КЛАДР в облаке» большое обновление. В данной статье я хочу рассказать об обновлении наиболее близкой к большинству пользователей части этого сервиса, а именно о jQuery плагине. Кому интересно, добро пожаловать под кат.

jQuery Kladr пример



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

Начнём наверно с самого важного и долгожданного обновления: поддержки ввода адреса одной строкой. Теперь для подключения этой возможности к полю ввода достаточно написать следующий код:

$('input').kladr({
   oneString: true
});

// Выводить только московские адреса
$('input').kladr({
   oneString: true,
   parentType: $.kladr.type.city,
   parentId: '7700000000000' // Москва
});

Посмотреть пример можно по ссылке.

Помимо этого мы реализовали фильтрацию населённых пунктов по типу (город, посёлок, село). Сейчас список предлагаемых населённых пунктов можно ограничить с помощью параметра typeCode плагина:

// Только города
$('input').kladr({
   type: $.kladr.type.city,
   typeCode: $.kladr.typeCode.city
});

// Города и посёлки
$('input').kladr({
   type: $.kladr.type.city,
   typeCode: $.kladr.typeCode.city + $.kladr.typeCode.settlement
});

// Все населённые пункты
$('input').kladr({
   type: $.kladr.type.city
});

Посмотреть пример с использованием typeCode можно на сайте.

Ну и последней новой возможностью сервиса является поиск по почтовому индексу. Специально для неё был реализован плагин kladrZip. Он проверяет корректность введённого почтового индекса и если ему соответствует реальный адрес подставляет объекты этого адреса в другие поля формы. Звучит не очень понятно, согласен, лучше 1 раз увидеть. Подключается же плагин очень просто:

$('input').kladrZip();

Это первая версия kladrZip, поэтому он практически не принимает параметров. В дальнейшем плагин будет дорабатываться.

На этом новые возможности сервиса, отражённые в jQuery плагине, закончились. Но это ещё не всё. Сам плагин был полностью переработан для того, чтобы сделать автодополнение адреса ещё удобнее для пользователя и менее трудоёмко для разработчика. Перечислю вкратце новые возможности:

  • Добавлен параметр parentInput, значительно упрощающий создание формы для ввода адреса из нескольких полей;
  • Добавлена функция $.kladr.setDefault, позволяющая изменять параметры по умолчанию плагина;
  • Добавлена функция $.kladr.getInputs, позволяющая получить массив всех полей, к которым был подключён плагин;
  • Добавлена функция $.kladr.getAddress, собирающая строку адреса.

В примере формы с картой наверно наиболее наглядно продемонстрировано применение этих возможностей. Исходный код этого примера можно посмотреть на гитхабе.

Исходный код плагина https://github.com/garakh/kladrapi-jsclient.

Сообщить о баге можно:
на гитхабе github.com/garakh/kladrapi-jsclient/issues
в trello trello.com/b/NlSSs2UV/-
в отзывах kladrapi.reformal.ru/
или в комментариях к статье =)

комментарии (6)

0
dima117 ,  
Пытался найти «2-й Магистральный тупик» — не находит ни в какую. Оказалось, нужно искать «тупик Магистральный 2-й». Имхо, это значит, что часть пользователей не смогут (!) выбрать адрес. Печаль :(
–2
xescoder ,  
Согласен, это пока проблема. Но мы в этом направлении работаем. К следующей версии сервиса постараемся исправить.
0
xescoder ,  
Можно узнать в каком примере вы пытались найти «2-й Магистральный тупик»?
0
dima117 ,  
Извините, забыл указать. Искал здесь: kladr-api.ru/examples/#one_string
0
xescoder ,  
Ок. Записали в trello trello.com/c/g0hw2dlR/57-- Скоро поправим
0
dobriykot ,  
«7-я Кожуховская» тоже не находит.