it-swarm.com.ru

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

я использую виджет автозаполнения 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. есть идеи где искать?

21
mango

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

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

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

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

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

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

61
DondeEstaMiCulo

При использовании 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);
    }
});
11
mhu

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

// 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());
 });
7
Jader A. Wagner

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

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

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

4
Allfarid Morales García

Я решил добавить атрибут 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;
}
3
kachar

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

3
Francisco Balam
    $("#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")
                        });
                    });
                }
2
Parth Patel

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

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

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

2
Anders

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

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

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

1
farpaci

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

1
Robert Isaev

У меня тоже была эта проблема. Я работаю в UserFrosting, у которого есть bootstrap и select2, но в ядре нет jquery-ui. Мое автозаполнение было внутри модального всплывающего окна, где тег сценария и $(document). Ready находятся после html для модальной формы. После погони за всевозможными несуществующими конфликтами и попытки превратить select2 (v 4) в комбинированный список, я вернулся к хаку 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)
1
TauranJanitor

У меня та же проблема, но после некоторой борьбы я использую Firefox, чтобы найти решение.

В Chrome, когда открывается любой вид автозаполнения, и вы хотите проверить элемент, который исчезнет при нажатии на любой компонент.

но

В Firefox это будет отображаться непрерывно, чтобы мы могли найти представление вообще.

и я сделал то же самое с этим, и я нашел класс, имеющий z-index

z-index: 1000

так что я просто изменил это на больше похоже

.pac-container{
    z-index: 999999;
}

возможно, это решение z-index не подойдет вам всем, но я уверен, что функция Firefox определенно поможет вам найти лучшее решение.

1
Dev Sabby

Это помогло мне:

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

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

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

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

0
Corey Harden

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-index или переопределять принудительный фокус начальной загрузки (это не называется)

0
JHRS

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

Всегда объявляйте свой диалог, прежде чем устанавливать автозаполнение.

Я переключил их, и вуаля!

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

0
Charles St-Pierre

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

$("#input_box_id").autocomplete({<br> source:sourceArray/link,<br> appendTo :"#<i>my_modal</i>"<br> }); ссылка: https://stackoverflow.com/a/22343584/5803974

0
Satish