Интеграция

jQuery plugin

---

• Скачать ZIP
• Github

Версия 2.х

Текущая версия плагина — 2.х. Ее можно скачать с github
Подробная документация находится так же на странице github.

Версия 1.х

Предыдущая версия плагина — 1.4 Скачать.
Документация по версии 1.4. приведена ниже.

Архитектура

• $.kladr - (статичный объект) предоставляет методы и свойства для работы с сервисом
• $( "selector" ).kladr - (плагин jQuery) плагин для автодополнения адреса

Подключение

$( 'input' ).kladr({
    option1: 'value1',
    option2: 'value2'
});
                    

Чтение опции, свойства

$( 'input' ).kladr('option1');
                    

Изменение опции, свойства

$( 'input' ).kladr('option1', 123);
                    

Свойства объекта $.kladr

• url - url сервиса, по-умолчанию https://kladr-api.ru/api.php
• type - перечисление используемых типов объектов. Список значений: region, district, city, street, building
• api = function( query, callback ) {} - функция непосредственно выполняющая запрос к сервису. В качестве параметров принимает объект запроса и функцию, которой будет передан ответ сервиса.
• check = function( query, callback ) {} - функция для проверки существования объекта. В качестве параметров принимает объект запроса и функцию, которой будет передан объект (если он существует) либо false

Параметры плагина

• token - токен для доступа к сервису, обязательный параметр
• key – ключ для доступа к сервису, обязательный параметр
• type – тип подставляемых объектов, обязательный параметр
• parentType – тип родительского объекта, по-умолчанию null
• parentId - идентификатор родительского объекта, по-умолчанию null
• limit - количество отображаемых в выпадающем списке объектов, по-умолчанию 10
• withParents - получить объект вместе с родителями, по-умолчанию false
• showSpinner - отображать ajax-крутилку, по-умолчанию true
• verify - проверять введённые данные, по-умолчанию false
• current - текущий, выбранный объект КЛАДР

Методы плагина

• source = function( query ) { return objects; } - функция для получения списка объектов отображаемых при автодополнении. По-умолчанию запрашивает данные у сервиса. Может быть переопределена для получения объектов из другого источника.
• labelFormat = function( obj, query) { return label; } - функция для форматирования значений в списке. В качестве параметров принимает obj – объект КЛАДР, query – текущее значение поля ввода.
• valueFormat = function( obj, query) { return label; } – функция для форматирования подставляемых в поле ввода значений. В качестве параметров принимает obj – объект КЛАДР, query – текущее значение поля ввода.

События плагина

• open = function() {} - открыт список объектов. Доступно как событие kladr_open поля ввода.
• close = function() {} - закрыт список объектов. Доступно как событие kladr_close поля ввода.
• send = function() {} - отправлен запрос к сервису. Доступно как событие kladr_send поля ввода.
• received = function() {} - получен ответ от сервиса. Доступно как событие kladr_received поля ввода.
• select = function( obj ) {} - выбран объект в списке. В параметре передаётся текущий, выбранный объект КЛАДР. Доступно как событие kladr_select поля ввода.
• check = function( obj ) {} - проверен введённый пользователем объект. Вызывается только если параметр verify = true. В параметре передаётся текущий объект КЛАДР. Доступно как событие kladr_check поля ввода.

Примеры

Автодополнение городами России

$( 'input' ).kladr({
    token: 'token',
    key: 'key',
    type: $.kladr.type.city
});
                    

Изменении подписи при выборе района

$( 'input' ).kladr({
    token: 'token',
    key: 'key',
    type: $.kladr.type.district,
    select: function( obj ){
        $( 'label' ).text( obj.type );
    }
});
                    

Проверка названия города, введённого пользователем самостоятельно

$( 'input' ).kladr({
    token: 'token',
    key: 'key',
    type: $.kladr.type.city,
    check:  function( obj ){
        if(obj){
            $( 'input' ).css('color', 'black');
        } else {
            $( 'input' ).css('color', 'red');
        }
    }
});
                    

jQuery