JQuery UI автозаполнение в диалоговом окне модального интерфейса - предложения не отображаются?

Question

Я использую виджет автозаполнения jquery ui внутри диалогового окна jquery ui.когда я набираю текст для поиска, текстовое поле отступает (ui-autocomplet-loading), но не показывает никаких предложений.

var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];

$("#company").autocomplete({        
    source : availableTags ,
minLength: 2
});

company - это идентификатор текстового поля для прикрепления автозаполнения.

Я подумал, что это может быть индекс z, поэтому я установил это:

.ui-autocomplete, .ui-menu, .ui-menu-item {  z-index: 1006; }

, но он все равно не отображается.Я поместил автозаполнение на «обычной» странице, и она отлично работает.

Я использую jquery UI версии 1.8.2.есть идеи где искать?

Answer 1

Я сталкивался с этим ответом при поиске этой же проблемы, однако ни одно из решений не было именно тем, что я хотел.

Использование appendTo сработало, сортировка ... Элементы автозаполнения показывались там, где они должны были, однако это полностью бросило мое диалоговое окно в искаженный беспорядок неправильно перемещенных элементов div.

Итак, в моем собственном CSS-файле я создал следующее:

ul.ui-autocomplete {
    z-index: 1100;
}

Я уверен, что 1100 - это немного излишне, но я просто хотел быть осторожным. Хорошо работает и соответствует К.И.С.С. способ.

Я использую jQuery 1.9.2 с jQueryUI 1.10.2.

Answer 2

При использовании jQuery UI 1.10 не следует возиться с z-индексами (http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option). Опция appendTo работает, но ограничивает отображение до высоты диалога.

Чтобы исправить это: убедитесь, что элемент автозаполнения находится в правильном порядке DOM с помощью: автозаполнение .insertAfter ( диалог .parent ())

Пример

 var autoComplete,
     dlg = $("#copy_dialog"),
     input = $(".title", dlg);

 // initialize autocomplete
 input.autocomplete({
     ...
 });

 // get reference to autocomplete element
 autoComplete = input.autocomplete("widget");

 // init the dialog containing the input field
 dlg.dialog({
      ...
 });

 // move the autocomplete element after the dialog in the DOM
 autoComplete.insertAfter(dlg.parent());

Обновление для проблемы z-index после щелчка в диалоге

Z-индекс автозаполнения, кажется, изменяется после щелчка по диалоговому окну (какMatteoC). Обходное решение, описанное ниже, исправляет это:

См. скрипту: https://jsfiddle.net/sv9L7cnr/

// initialize autocomplete
input.autocomplete({
    source: ...,
    open: function () {
        autoComplete.zIndex(dlg.zIndex()+1);
    }
});

Answer 3

для одного или нескольких автозаполнений в том же диалоговом окне:

// init the dialog containing the input field
 $("#dialog").dialog({
      ...
 });

// initialize autocomplete
 $('.autocomplete').autocomplete({        
      source: availableTags,
      minLength: 2
 }).each(function() {
      $(this).autocomplete("widget").insertAfter($("#dialog").parent());
 });

Answer 4

Я решил это в bootbox так:

$( "#company" ).autocomplete({       
    source : availableTags ,
    appendTo: "#exportOrder"
});

Вам нужно только добавить список результатов к вашей форме.

Answer 5

В вашей реализации autocomplete добавьте appendTo: "#search_modal", где search_modal - это идентификатор вашего модала.

Answer 6

Я решил добавить атрибут z-index:1500 в мои div в jquery.autocomplete.css, потому что в диалоговом окне интерфейса пользователя Jquery z-index помещался между 1000 и 1005

ul.auto-complete-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1500;
    max-height: 250px;
    overflow: auto;
}

Answer 7

    $("#company").autocomplete({        
    source : availableTags ,
    appendTo : $('#divName')
    minLength: 2
});

Примечание: $ ('# divName') divName будет именем модального тела.

ПРИМЕР:

<form id="exportOrder">
        <div class="input-group">
            <input type="text" id="accountReferenceSearch" placeholder="Type Account Reference to search..." class="form-control" style="width:500px">
        </div>
    </div>
</form>

self.AttachAutoComplete = function () {
                    $('#accountReferenceSearch').focus(function () {
                        $('#accountReferenceSearch').autocomplete({
                            source: function (request, response) {},
                            minLength: 2,
                            delay: 300,
                            appendTo: $("#exportOrder")
                        });
                    });
                }

Answer 8

У меня возникла та же проблема, когда она пришла мне в голову:

Всегда объявляйте свой диалог ДО установки автозаполнения.

Я их переключилvoilà!

Автозаполнение настраивается вокруг целевого ВХОДА.Диалог создает новую разметку и CSS вокруг целевого контейнера.Мой выбор появляется за диалогом или за кадром.

Answer 9

У меня недавно была такая же проблема.Добавление этого в мой css-файл решило это для меня:

.ui-autocomplete-input, .ui-menu, .ui-menu-item {  z-index: 2006; }

Сначала я попробовал ваше начальное значение z-index 1006, но это не сработало.Увеличение стоимости работало для меня.

Answer 10

У нас была такая же проблема.Мы только что обновили наш css, чтобы z-index был достаточно высоким и не мог быть перезаписан:

.dropdown-menu {
  z-index: 9999 !important;
}

Поскольку добавление к body делает выпадающий дочерний элемент $ window, вам нужно сделать все выпадающее меню новым z-индекс.