Примеры

Все примеры сделаны с использованием плагина fias-api / jquery

АДРЕС ОТДЕЛЬНЫМИ ПОЛЯМИ С КАРТОЙ И ДОПОЛНИТЕЛЬНОЙ ИНФОРМАЦИЕЙ

Индекс

Область

Регион / район

Город / н. п.

Улица

Дом

Дополнительная информация:

Код КЛАДР

Код ФИАС

Код ОКАТО

Код ОКТМО

Код налоговой

Подпись

Подпись коротко

Тип объекта

Кадастровый номер

Показать код Скрыть код

<div class="wrapp_ex">
    <div class="hold_ex" id="form_with_map">
        <div class="form_ex js-form-address-map" >
            <div class="input_hold">
                <div class="label">Индекс</div>
                <div class="input">
                    <div class="input_text" style="display:none">
                        <span id="map_zip"></span>
                        <small>определен автоматически</small>
                    </div>
                </div>
            </div>
            <div class="input_hold">
                <label class="label">Область</label>
                <div class="input">
                    <input type="text" name="region">
                </div>
            </div>
            <div class="input_hold">
                <label class="label">Регион / район</label>
                <div class="input">
                    <input type="text" name="district">
                </div>
            </div>
            <div class="input_hold">
                <label class="label">Город / н. п.</label>
                <div class="input">
                    <input type="text" name="city" value="">
                </div>
            </div>
            <div class="input_hold">
                <label class="label">Улица</label>
                <div class="input">
                    <input type="text" name="street" value="">
                </div>
            </div>
            <div class="input_hold">
                <label class="label">Дом</label>
                <div class="input input_small">
                    <input type="text" name="building" value="">
                </div>
            </div>
            <div class="input_hold">
                <label class="label"></label>
                <div class="input input_small">
                    <a href="#" id="js-form-address-map-clear" style="display: none">Сбросить форму</a>
                </div>
            </div>
        </div>
        <div class="more_info">
            <div class="morinfo_title">
                Дополнительная информация:
            </div>
            <dl id="address" class="more_info_oneline"></dl>
            <dl>
                <dt>Код КЛАДР</dt>
                <dd id="kladrId" class="empty-field-filler">&nbsp;</dd>
            </dl>
            <dl>
                <dt>Код ФИАС</dt>
                <dd id="guid" class="empty-field-filler">&nbsp;</dd>
            </dl>
            <dl>
                <dt>Код ОКАТО</dt>
                <dd id="okatoId" class="empty-field-filler">&nbsp;</dd>
            </dl>
            <dl>
                <dt>Код ОКТМО</dt>
                <dd id="oktmo" class="empty-field-filler">&nbsp;</dd>
            </dl>
            <dl>
                <dt>Код налоговой</dt>
                <dd id="ifns" class="empty-field-filler">&nbsp;</dd>
            </dl>
            <dl>
                <dt>Подпись</dt>
                <dd id="typeId" class="empty-field-filler">&nbsp;</dd>
            </dl>
            <dl>
                <dt>Подпись коротко</dt>
                <dd id="typeShortId" class="empty-field-filler">&nbsp;</dd>
            </dl>
            <dl>
                <dt>Тип объекта</dt>
                <dd id="contentTypeId" class="empty-field-filler">&nbsp;</dd>
            </dl>
            </dl>
            <dl>
                <dt>Кадастровый номер</dt>
                <dd id="cadnum" class="empty-field-filler">&nbsp;</dd>
            </dl>
        </div>
    </div>
    <div id="map" class="map_ex"></div>
</div>

/* Устанавливаем свой шрифт для выпадающего списка*/
#kladr_autocomplete a,
#kladr_autocomplete strong{
    font-family: MuseoSansCyrl, Arial, Helvetica, sans-serif;
    font-size: 15px;
}

#kladr_autocomplete small {
    font-family: MuseoSansCyrl, Arial, Helvetica, sans-serif;
    font-size: 13px;
}

/* Добавляем скругления и тень у выпадающего списка*/
#kladr_autocomplete ul {
    border-radius: 0 0 5px 5px;
    border: 1px solid #ded7f9;
    overflow: hidden;
    background: #fff;
    -webkit-box-shadow: 0 2px 10px 0 rgba(86, 62, 142, 0.1);
    box-shadow: 0 2px 10px 0 rgba(86, 62, 142, 0.1);
    z-index: 1;
}

/* Прописываем стили для тултипа с сообщением об ошибке*/
.tooltip {
    position: absolute;
    top: 16px;
    left: 360px;
    color: #b94a48;
    padding: 8px 10px;
    border-radius: 5px;
    border: 1px solid #eed3d7;
    background-color: #f2dede;
    opacity: 0.8;
    font-size: 14px;
    z-index: 100000;
}

(function () {
    var $container = $(document.getElementById('form_with_map'));

    var $region = $container.find('[name="region"]'),
        $district = $container.find('[name="district"]'),
        $city = $container.find('[name="city"]'),
        $street = $container.find('[name="street"]'),
        $building = $container.find('[name="building"]'),
        $address = $container.find('#address'),
        $zip = $container.find('#map_zip'),
        $kladrId = $container.find('#kladrId'),
        $okatoId = $container.find('#okatoId'),
        $typeId = $container.find('#typeId'),
        $typeShortId = $container.find('#typeShortId'),
        $contentTypeId = $container.find('#contentTypeId');

    var map = null,
        map_created = false;

    $()
        .add($region)
        .add($district)
        .add($city)
        .add($street)
        .add($building)
        .fias({
            parentInput: $container.find('.js-form-address-map'),
            verify: true,
            change: function (obj) {
                if (obj) {
                    setLabel($(this), obj.type);
                    $kladrId.text(obj.id ? obj.id : '');
                    $okatoId.text(obj.okato ? obj.okato : '');
                    $typeId.text(obj.type ? obj.type : '');
                    $typeShortId.text(obj.typeShort ? obj.typeShort : '');
                    $contentTypeId.text(obj.contentType ? obj.contentType : '');

                    if (obj.parents) {
                        $.fias.setValues(obj.parents, '.js-form-address-map');
                    }
                }

                var $zipWrap = $zip.parent();
                if (obj && obj.zip) {
                    $zip.text(obj.zip);
                    $zipWrap.show();
                }//Обновляем поле zip
                else {
                    $zipWrap.hide();
                }


                addressUpdate();
                mapUpdate();
            },
            checkBefore: function () {
                var $input = $(this);

                if (!$.trim($input.val())) {
                    addressUpdate();
                    mapUpdate();
                    return false;
                }
            }
        });

    $region.fias('type', $.fias.type.region);
    $district.fias('type', $.fias.type.district);
    $city.fias('type', $.fias.type.city);
    $street.fias('type', $.fias.type.street);
    $building.fias('type', $.fias.type.building);

    // Включаем получение родительских объектов для населённых пунктов
    $district.fias('withParents', true);
    $city.fias('withParents', true);
    $street.fias('withParents', true);


    // Отключаем проверку введённых данных для строений
    $building.fias('verify', false);

    ymaps.ready(function () {
        if (map_created) return;
        map_created = true;

        map = new ymaps.Map('map', {
            center: [55.76, 37.64],
            zoom: 12,
            controls: []
        });

        map.controls.add('zoomControl', {
            position: {
                right: 10,
                top: 10
            }
        });
    });

    function setLabel($input, text) {
        text = text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
        $input.parent().find('label').text(text);
    }

    function mapUpdate() {
        var zoom = 4;

        var address = $.fias.getAddress('.js-form-address-map', function (objs) {
            var result = '';

            $.each(objs, function (i, obj) {
                var name = '',
                    type = '';

                if ($.type(obj) === 'object') {
                    name = obj.name;
                    type = ' ' + obj.type;

                    switch (obj.contentType) {
                        case $.fias.type.region:
                            zoom = 4;
                            break;

                        case $.fias.type.district:
                            zoom = 7;
                            break;

                        case $.fias.type.city:
                            zoom = 10;
                            break;

                        case $.fias.type.street:
                            zoom = 13;
                            break;

                        case $.fias.type.building:
                            zoom = 16;
                            break;
                    }
                }
                else {
                    name = obj;
                }

                if (result) result += ', ';
                result += type + name;
            });

            return result;
        });

        if (address && map_created) {
            var geocode = ymaps.geocode(address);
            geocode.then(function (res) {
                map.geoObjects.each(function (geoObject) {
                    map.geoObjects.remove(geoObject);
                });

                var position = res.geoObjects.get(0).geometry.getCoordinates(),
                    placemark = new ymaps.Placemark(position, {}, {});

                map.geoObjects.add(placemark);
                map.setCenter(position, zoom);
            });
        }
    }

    function addressUpdate() {
        var address = $.fias.getAddress($container.find('.js-form-address-map'));

        $address.text(address);
    }

})();

АДРЕС ОТДЕЛЬНЫМИ ПОЛЯМИ

Показать код Скрыть код

<div id="address_multiple_fields">
    <form class="js-form-address">
        <div class="flex">
            <div class="half">
                <div class="input">
                    <label>Индекс</label>
                    <input type="text" name="zip" placeholder="Будет определен автоматически">
                </div>
                <div class="input">
                    <label>Область</label>
                    <input type="text" name="region">
                </div>
                <div class="input">
                    <label>Регион / район</label>
                    <input type="text" name="district">
                </div>
            </div>
            <div class="half">
                <div class="input">
                    <label>Город / населенный пункт</label>
                    <input type="text" name="city">
                </div>
                <div class="input">
                    <label>Улица</label>
                    <input type="text" name="street">
                </div>
                <div class="input input_litl">
                    <label>Дом</label>
                    <input type="text" name="building">
                </div>
            </div>
        </div>
    </form>

</div>

/* Устанавливаем свой шрифт для выпадающего списка*/
#kladr_autocomplete a,
#kladr_autocomplete strong{
    font-family: MuseoSansCyrl, Arial, Helvetica, sans-serif;
    font-size: 15px;
}

#kladr_autocomplete small {
    font-family: MuseoSansCyrl, Arial, Helvetica, sans-serif;
    font-size: 13px;
}

/* Добавляем скругления и тень у выпадающего списка*/
#kladr_autocomplete ul {
    border-radius: 0 0 5px 5px;
    border: 1px solid #ded7f9;
    overflow: hidden;
    background: #fff;
    -webkit-box-shadow: 0 2px 10px 0 rgba(86, 62, 142, 0.1);
    box-shadow: 0 2px 10px 0 rgba(86, 62, 142, 0.1);
    z-index: 1;
}

/* Прописываем стили для тултипа с сообщением об ошибке*/
.tooltip {
    position: absolute;
    top: 16px;
    left: 360px;
    color: #b94a48;
    padding: 8px 10px;
    border-radius: 5px;
    border: 1px solid #eed3d7;
    background-color: #f2dede;
    opacity: 0.8;
    font-size: 14px;
    z-index: 100000;
}

// Form example
(function () {
    var $container = $(document.getElementById('address_multiple_fields'));

    var $tooltip = $('#tooltip');

    var $zip = $container.find('[name="zip"]'),
        $region = $container.find('[name="region"]'),
        $district = $container.find('[name="district"]'),
        $city = $container.find('[name="city"]'),
        $street = $container.find('[name="street"]'),
        $building = $container.find('[name="building"]');
    $()
        .add($region)
        .add($district)
        .add($city)
        .add($street)
        .add($building)
        .fias({
            parentInput: $container.find('.js-form-address'),
            verify: true,
            select: function (obj) {
                if (obj.zip) $zip.val(obj.zip);//Обновляем поле zip
                setLabel($(this), obj.type);
                $tooltip.hide();
            },
            check: function (obj) {
                var $input = $(this);

                if (obj) {
                    setLabel($input, obj.type);
                    $tooltip.hide();
                }
                else {
                    showError($input, 'Ошибка');
                }
            },
            checkBefore: function () {
                var $input = $(this);

                if (!$.trim($input.val())) {
                    $tooltip.hide();
                    return false;
                }
            }
        });

    $region.fias('type', $.fias.type.region);
    $district.fias('type', $.fias.type.district);
    $city.fias('type', $.fias.type.city);
    $street.fias('type', $.fias.type.street);
    $building.fias('type', $.fias.type.building);

    $district.fias('withParents', true);
    $city.fias('withParents', true);
    $street.fias('withParents', true);

    // Отключаем проверку введённых данных для строений
    $building.fias('verify', false);

    // Подключаем плагин для почтового индекса
    $zip.fiasZip($container);

    function setLabel($input, text) {
        text = text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
        $input.parent().find('label').text(text);
    }

    function showError($input, message) {
        $tooltip.find('span').text(message);

        var inputOffset = $input.offset(),
            inputWidth = $input.outerWidth(),
            inputHeight = $input.outerHeight();

        var tooltipHeight = $tooltip.outerHeight();
        var tooltipWidth = $tooltip.outerWidth();

        $tooltip.css({
            left: (inputOffset.left + inputWidth - tooltipWidth) + 'px',
            top: (inputOffset.top + (inputHeight - tooltipHeight) / 2 - 1) + 'px'
        });

        $tooltip.fadeIn();
    }
})();

Заполнение адреса по индексу

Показать код Скрыть код

<div id="address_zip">
    <form class="js-form-address">
        <div class="flex">
            <div class="half">
                <div class="input">
                    <label>Индекс</label>
                    <input type="text" name="zip" placeholder="Введите индекс">
                </div>
                <div class="input">
                    <label>Область</label>
                    <input type="text" name="region" disabled="true">
                </div>
                <div class="input">
                    <label>Регион / район</label>
                    <input type="text" name="district" disabled="true">
                </div>
            </div>
            <div class="half">
                <div class="input">
                    <label>Город / населенный пункт</label>
                    <input type="text" name="city" disabled="true">
                </div>
                <div class="input">
                    <label>Улица</label>
                    <input type="text" name="street" disabled="true">
                </div>
                <div class="input input_litl">
                    <label>Дом</label>
                    <input type="text" name="building" disabled="true">
                </div>
            </div>
        </div>
    </form>

</div>

/* Устанавливаем свой шрифт для выпадающего списка*/
#kladr_autocomplete a,
#kladr_autocomplete strong{
    font-family: MuseoSansCyrl, Arial, Helvetica, sans-serif;
    font-size: 15px;
}

#kladr_autocomplete small {
    font-family: MuseoSansCyrl, Arial, Helvetica, sans-serif;
    font-size: 13px;
}

/* Добавляем скругления и тень у выпадающего списка*/
#kladr_autocomplete ul {
    border-radius: 0 0 5px 5px;
    border: 1px solid #ded7f9;
    overflow: hidden;
    background: #fff;
    -webkit-box-shadow: 0 2px 10px 0 rgba(86, 62, 142, 0.1);
    box-shadow: 0 2px 10px 0 rgba(86, 62, 142, 0.1);
    z-index: 1;
}

/* Прописываем стили для тултипа с сообщением об ошибке*/
.tooltip {
    position: absolute;
    top: 16px;
    left: 360px;
    color: #b94a48;
    padding: 8px 10px;
    border-radius: 5px;
    border: 1px solid #eed3d7;
    background-color: #f2dede;
    opacity: 0.8;
    font-size: 14px;
    z-index: 100000;
}

(function () {
    var $container = $(document.getElementById('address_zip'));


    var $zip = $container.find('[name="zip"]'),
        $region = $container.find('[name="region"]'),
        $district = $container.find('[name="district"]'),
        $city = $container.find('[name="city"]'),
        $street = $container.find('[name="street"]'),
        $building = $container.find('[name="building"]');
    $()
        .add($region)
        .add($district)
        .add($city)
        .add($street)
        .add($building)
        .fias({
            parentInput: $container.find('.js-form-address'),
            verify: false,
        });

    $region.fias('type', $.fias.type.region);
    $district.fias('type', $.fias.type.district);
    $city.fias('type', $.fias.type.city);
    $street.fias('type', $.fias.type.street);
    $building.fias('type', $.fias.type.building);

    $district.fias('withParents', true);
    $city.fias('withParents', true);
    $street.fias('withParents', true);


    // Подключаем плагин для почтового индекса
    $zip.fiasZip($container, function(obj){
        $region.removeAttr('disabled');
        $district.removeAttr('disabled');
        $city.removeAttr('disabled');
        $street.removeAttr('disabled');
        $building.removeAttr('disabled');
    });

})();

АДРЕС ОДНОЙ СТРОКОЙ

Показать код Скрыть код

<div id="one_string">
    <div class="input">
        <input type="text" name="address" placeholder="Адрес">
    </div>
</div>

/* Устанавливаем свой шрифт для выпадающего списка*/
#kladr_autocomplete a,
#kladr_autocomplete strong{
    font-family: MuseoSansCyrl, Arial, Helvetica, sans-serif;
    font-size: 15px;
}

#kladr_autocomplete small {
    font-family: MuseoSansCyrl, Arial, Helvetica, sans-serif;
    font-size: 13px;
}

/* Добавляем скругления и тень у выпадающего списка*/
#kladr_autocomplete ul {
    border-radius: 0 0 5px 5px;
    border: 1px solid #ded7f9;
    overflow: hidden;
    background: #fff;
    -webkit-box-shadow: 0 2px 10px 0 rgba(86, 62, 142, 0.1);
    box-shadow: 0 2px 10px 0 rgba(86, 62, 142, 0.1);
    z-index: 1;
}

/* Прописываем стили для тултипа с сообщением об ошибке*/
.tooltip {
    position: absolute;
    top: 16px;
    left: 360px;
    color: #b94a48;
    padding: 8px 10px;
    border-radius: 5px;
    border: 1px solid #eed3d7;
    background-color: #f2dede;
    opacity: 0.8;
    font-size: 14px;
    z-index: 100000;
}

(function () {
    var $container = $(document.getElementById('one_string'));

    var $address = $container.find('[name="address"]');

    $address.fias({
        oneString: true,
    });
})();

АДРЕС ОДНОЙ СТРОКОЙ С ДОПОЛНИТЕЛЬНОЙ ИНФОРМАЦИЕЙ

Вся Россия Москва Санкт-Петербург

Дополнительная информация:

Код КЛАДР

Код ОКАТО

Показать код Скрыть код

<div id="one_string_plus">
    <div class="input">
        <input type="text" name="address" placeholder="Адрес">
    </div>
    <div class="adr_info_half">
        <div class="adr_info_half_l">
            <div class="radio_wrapp">
                <label class="custom_radio_hold">
                    <input type="radio" name="parent" value="all" checked>
                    <span class="custom_radio"></span>
                    Вся Россия
                </label>
                <label class="custom_radio_hold">
                    <input type="radio" name="parent" value="moscow">
                    <span class="custom_radio"></span>
                    Москва
                </label>
                <label class="custom_radio_hold">
                    <input type="radio" name="parent" value="spb">
                    <span class="custom_radio"></span>
                    Санкт-Петербург
                </label>
            </div>
        </div>
        <div class="adr_info_half_r">
            <div class="more_info">
                <div class="morinfo_title">
                    Дополнительная информация:
                </div>
                <dl>
                    <dt>Код КЛАДР</dt>
                    <dd id="one_stringplus_kladrId"><span class="txt_imit"></span></dd>
                </dl>
                <dl>
                    <dt>Код ОКАТО</dt>
                    <dd id="one_stringplus_okatoId"><span class="txt_imit"></span></dd>
                </dl>
            </div>
        </div>
    </div>
</div>

/* Устанавливаем свой шрифт для выпадающего списка*/
#kladr_autocomplete a,
#kladr_autocomplete strong{
    font-family: MuseoSansCyrl, Arial, Helvetica, sans-serif;
    font-size: 15px;
}

#kladr_autocomplete small {
    font-family: MuseoSansCyrl, Arial, Helvetica, sans-serif;
    font-size: 13px;
}

/* Добавляем скругления и тень у выпадающего списка*/
#kladr_autocomplete ul {
    border-radius: 0 0 5px 5px;
    border: 1px solid #ded7f9;
    overflow: hidden;
    background: #fff;
    -webkit-box-shadow: 0 2px 10px 0 rgba(86, 62, 142, 0.1);
    box-shadow: 0 2px 10px 0 rgba(86, 62, 142, 0.1);
    z-index: 1;
}

/* Прописываем стили для тултипа с сообщением об ошибке*/
.tooltip {
    position: absolute;
    top: 16px;
    left: 360px;
    color: #b94a48;
    padding: 8px 10px;
    border-radius: 5px;
    border: 1px solid #eed3d7;
    background-color: #f2dede;
    opacity: 0.8;
    font-size: 14px;
    z-index: 100000;
}

(function () {
    var $container = $(document.getElementById('one_string_plus'));
    var $parent = $container.find('[name="parent"]');

    var $address = $container.find('[name="address"]');

    var $kladrId = $container.find('#one_stringplus_kladrId');
    var $okatoId = $container.find('#one_stringplus_okatoId');

    $address.fias({
        oneString: true,
        change: function (obj) {
            if (obj) {
                $kladrId.text(obj.id ? obj.id : '');
                $okatoId.text(obj.okato ? obj.okato : '');
            }
        }
    });

    $parent.change(function () {
        changeParent($(this).val());
    });


    function changeParent(value) {
        var parentType = null,
            parentId = null;

        switch (value) {
            case 'moscow':
                parentType = $.fias.type.region;
                parentId = '7700000000000';
                break;

            case 'spb':
                parentType = $.fias.type.region;
                parentId = '7800000000000';
                break;
        }

        $address.fias({
            parentType: parentType,
            parentId: parentId
        });
    }
})();

ОГРАНИЧЕНИЕ СПИСКА НАСЕЛЕННЫХ ПУНКТОВ

Все населённые пункты Только города Города и посёлки

Показать код Скрыть код

<div id="type_code">
    <div class="input">
        <input type="text" name="city" placeholder="Город">
    </div>
    <!-- end .input -->
    <div class="radio_wrapp">
        <label class="custom_radio_hold">
            <input type="radio" name="typecode" value="all" checked>
            <span class="custom_radio"></span>
            Все населённые пункты
        </label>
        <!-- end .custom_radio_hold -->
        <label class="custom_radio_hold">
            <input type="radio" name="typecode" value="city">
            <span class="custom_radio"></span>
            Только города
        </label>
        <!-- end .custom_radio_hold -->
        <label class="custom_radio_hold">
            <input type="radio" name="typecode" value="settlement">
            <span class="custom_radio"></span>
            Города и посёлки
        </label>
        <!-- end .custom_radio_hold -->
    </div>
    <!-- end .radio_wrapp -->
</div>

/* Устанавливаем свой шрифт для выпадающего списка*/
#kladr_autocomplete a,
#kladr_autocomplete strong{
    font-family: MuseoSansCyrl, Arial, Helvetica, sans-serif;
    font-size: 15px;
}

#kladr_autocomplete small {
    font-family: MuseoSansCyrl, Arial, Helvetica, sans-serif;
    font-size: 13px;
}

/* Добавляем скругления и тень у выпадающего списка*/
#kladr_autocomplete ul {
    border-radius: 0 0 5px 5px;
    border: 1px solid #ded7f9;
    overflow: hidden;
    background: #fff;
    -webkit-box-shadow: 0 2px 10px 0 rgba(86, 62, 142, 0.1);
    box-shadow: 0 2px 10px 0 rgba(86, 62, 142, 0.1);
    z-index: 1;
}

/* Прописываем стили для тултипа с сообщением об ошибке*/
.tooltip {
    position: absolute;
    top: 16px;
    left: 360px;
    color: #b94a48;
    padding: 8px 10px;
    border-radius: 5px;
    border: 1px solid #eed3d7;
    background-color: #f2dede;
    opacity: 0.8;
    font-size: 14px;
    z-index: 100000;
}

// Type code example
(function () {
    var $container = $(document.getElementById('type_code'));

    var $city = $container.find('[name="city"]'),
        $typeCode = $container.find('[name="typecode"]');

    $city.fias({
        type: $.fias.type.city,
    });

    $city.fias('withParents', true);

    $typeCode.change(function () {
        changeTypeCode($(this).val());
    });

    changeTypeCode($container.find('[name="typecode"]:checked').val());

    function changeTypeCode(value) {
        var typeCode = null;

        switch (value) {
            case 'city':
                typeCode = $.fias.typeCode.city;
                break;

            case 'settlement':
                typeCode = $.fias.typeCode.city + $.fias.typeCode.settlement;
                break;

            case 'all':
                typeCode = $.fias.typeCode.city + $.fias.typeCode.settlement + $.fias.typeCode.village;
                break;
        }

        $city.fias('typeCode', typeCode);
    }
})();

Ручная установка значений

Установить в поле ввода следующий объект:

Новый Уренгой Мурманск Хабаровск

Показать код Скрыть код

<div id="address_manual">
    <b>Установить в поле ввода следующий объект:</b>
    <div class="radio_wrapp">
        <label class="custom_radio_hold">
            <input type="radio" name="city_id" value="8900000600000">
            <span class="custom_radio"></span>
            Новый Уренгой
        </label>
        <!-- end .custom_radio_hold -->
        <label class="custom_radio_hold">
            <input type="radio" name="city_id" value="5100000100000">
            <span class="custom_radio"></span>
            Мурманск
        </label>
        <!-- end .custom_radio_hold -->
        <label class="custom_radio_hold">
            <input type="radio" name="city_id" value="2700000100000">
            <span class="custom_radio"></span>
            Хабаровск
        </label>
        <!-- end .custom_radio_hold -->
    </div>


    <div class="input js-form-address">
        <input type="text" name="city" placeholder="Город">
    </div>
    <div class="input" id="address_manual_log">
    </div>
    <!-- end .input -->

    <!-- end .radio_wrapp -->
</div>

/* Устанавливаем свой шрифт для выпадающего списка*/
#kladr_autocomplete a,
#kladr_autocomplete strong{
    font-family: MuseoSansCyrl, Arial, Helvetica, sans-serif;
    font-size: 15px;
}

#kladr_autocomplete small {
    font-family: MuseoSansCyrl, Arial, Helvetica, sans-serif;
    font-size: 13px;
}

/* Добавляем скругления и тень у выпадающего списка*/
#kladr_autocomplete ul {
    border-radius: 0 0 5px 5px;
    border: 1px solid #ded7f9;
    overflow: hidden;
    background: #fff;
    -webkit-box-shadow: 0 2px 10px 0 rgba(86, 62, 142, 0.1);
    box-shadow: 0 2px 10px 0 rgba(86, 62, 142, 0.1);
    z-index: 1;
}

/* Прописываем стили для тултипа с сообщением об ошибке*/
.tooltip {
    position: absolute;
    top: 16px;
    left: 360px;
    color: #b94a48;
    padding: 8px 10px;
    border-radius: 5px;
    border: 1px solid #eed3d7;
    background-color: #f2dede;
    opacity: 0.8;
    font-size: 14px;
    z-index: 100000;
}

(function () {
    var $container = $(document.getElementById('address_manual'));

    var $city = $container.find('[name="city"]'),
        $cityId = $container.find('[name="city_id"]');

    $city.fias({
        type: $.fias.type.city,
        'withParents': true,
        change: function (obj) {
            var address = $.fias.getAddress($container.find('.js-form-address'));

            $('#address_manual_log').text(address);
        },
    });

    $cityId.change(function () {
        var id = $(this).val();

        // Устанавливаем значение поля ввода по id
        $city.fias('controller').setValueById(id);
    });


})();

API-ТЕСТЕР

Запрос (query)

Код региона (regionId)

Код района (districtId)

Код города (cityId)

Код улицы (streetId)

Код строения (buildingId)

Тип (contentType)

Родители (withParent)

Количество для вывода (limit)

Результат