КЛАДР API и jQuery плагин. Странное поведение в Twitter Bootstrap 3 Modal form?

Question

[Altf1]

Хочу использовать в проекте автодополнение из КЛАДР улиц по городу. но возникла проблема.
Если input находится на странице, то все работает идеально.
Если же этот input поместить на Bootstrap3 modal форму, то автодополнение не появляется.
В чем проблема?
JS код

$('#Street').kladr({
            token: KLADR_token,
            key: KLADR_key,
            type: $.ui.kladrObjectType.STREET,
            parentType: $.ui.kladrObjectType.CITY,
            parentId: KLADR_parentId
        });

HTML код

<div class="form-group">
<label class="control-label">Улица</label>
<div class="controls">
<input id="Street" type="text" class="form-control">
</div>
</div>

Answer 1

[Юрий Лобанов]

А все классы, id и так далее заполнены точно также? Вы можете выложить оба кода, в составе модального окна и просто на странице?

Comments

[Altf1]

HTML целиком pastebin.com/KcApmt4q
вставляю ее в DIV другой страницы
CSS от КЛАДР из демо.
JS
var KLADR_token = 'токен';
var KLADR_key = 'ключ';
var KLADR_parentId = 'код';
$('#announcementsSearchStreet').kladr({
token: KLADR_token,
key: KLADR_key,
type: $.ui.kladrObjectType.STREET,
parentType: $.ui.kladrObjectType.CITY,
parentId: KLADR_parentId
});
или
$('#announcementsStreet').kladr({
token: KLADR_token,
key: KLADR_key,
type: $.ui.kladrObjectType.STREET,
parentType: $.ui.kladrObjectType.CITY,
parentId: KLADR_parentId
});
первый случай работает, второй нет.

[Юрий Лобанов]

Во втором у Вас id неправильно написан, #announcementsStreet вместо #announcementsSearchStreet. А Вы уверены, что автодополнение не появляется? Может просто оно скрыто, посмотрите внимательно через просмотр кода, возможно блок с автодополнением просто скрыт?

[Altf1]

да, во втором опечатка, но суть не меняется.
Проверил инспектор объектов, Вы правы, он появляется.
Дефолтные параметры. Если убрать display.none, то я вижу только контур объекта, сам он явно где то под модальным окном. Как быть?

[Altf1]

Выглядит так - для элемента, расположенного на странице как минимум display меняется с none на top, для модального такого не происходит. Если менять руками, то элемент не виден. Игры с z-index ни к чему не привели.

[Altf1]

ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-3" tabindex="0" style="display: none;">

[Юрий Лобанов]

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

[Altf1]

@iiil я Вам очень благодарен за помощь, так исторически сложилось, что я Java-разработчик и веб от меня немного далеко. Большое спасибо за помощь.

Answer 2

[Beagler]

оберните скрипт в

$(document).ready(function(){

});

Answer 3

[Никита Кучеров]

Может кому пригодится, вот тут всегда можно свежий КЛАДР взять. Плюс подписаться на обновления.