Jquery UI автозаполняется внутри модального диалога ui - предложения не отображаются?

Ответ 1

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

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

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

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

Я уверен, что 1100 немного переборщил, но я просто хотел играть в это безопасно. Он хорошо работает и соответствует требованиям K.I.S.S. Метод.

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

Ответ 2

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

Чтобы исправить это: убедитесь, что элемент автозаполнения находится в правильном порядке DOM: autocomplete.insertAfter(dialog.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);
    }
});

Ответ 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());
 });

Ответ 4

Я решил добавить атрибут z-index:1500 к моим divs в jquery.autocomplete.css, потому что JQuery UI Dialog устанавливает z-индекс между 1000 и 1005

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

Ответ 5

Я решил это в bootbox следующим образом:

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

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

Ответ 6

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

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

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

Ответ 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")
                        });
                    });
                }

Ответ 8

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

Ответ 9

В моем случае добавление стилей в css не работает, но после добавления свойства zIndex точно в конструктор элемента jQuery ui он работает как прелесть.

Ответ 10

Это сделало трюк для меня:

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

Ответ 11

У меня тоже была эта проблема. Я работаю в UserFrosting, который имеет bootstrap и select2, но не имеет jquery-ui в ядре. Моя автозаполнение находилось внутри модального всплывающего окна, где тег script и $(document).ready после html для модальной формы. После преследования всех видов несуществующих конфликтов и попыток сделать select2 (v 4) в combobox, я вернулся к взлому css, и это сработало:

.ui-autocomplete {z-index: 1061 !important;}

Моя среда

• UserFrosting с jquery 1-11.2
• самозагрузки-3.3.2,
• самозагрузки покадрово
• select2 v3.5.1
• jquery-ui-1.11.4 (тема dot-luv)

Ответ 12

Добавьте в свой javascript следующий метод и вызовите его из события onload элемента body:

//initialization
function init(){
    var autoSuggestion = document.getElementsByClassName('ui-autocomplete');
    if(autoSuggestion.length > 0){
        autoSuggestion[0].style.zIndex = 1051;
    }
}

Это работает для меня:) Я получил это, посмотрев на вычисленный стиль модального диалога, чтобы узнать, что это за индекс z. Таким образом, вся функция - это захват окна автообновления, созданного jquery (одним из имен этого класса, которое может быть другим для вас, но идея остается тем же) и изменить его css, чтобы включить z-index на 1 пункт выше, чем z-индекс модального (который был 1050)

Ответ 13

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

Всегда указывайте свой диалог перед настройкой автозаполнения.

Ive переключил их, et voilà!

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

Ответ 14

Попробуйте следующее: -
my_modal: модальный идентификатор
Использовать appendTo для автокоманды

$( "# input_box_id" ). Автозаполнения ({
  Источник: sourceArray/ссылка,
  appendTo: "# my_modal"
});

ссылка: fooobar.com/questions/426274/...

Ответ 15

Ответ Johann-S здесь работал у меня.

просто добавьте data-focus = "false" к кнопке или ссылке, вызывающей модальную форму

<button type="button" class="btn btn-primary" 
 data-toggle="modal" 
 data-focus="false"
data-target=".bd-example-modal-sm">Small modal</button>

Таким образом, вам не нужно возиться с z-индексами или переопределять загрузку, применяя фокус (он не называется)