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

Question

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

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

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

Компания является идентификатором текстового поля для прикрепления автозаполнения.

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

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

, но он все еще не показывает. Я помещаю автозаполнение на «регулярную» страницу, и она отлично работает.

Я использую jQuery ui версии 1.8.2. любые идеи о том, где искать?

Answer 1

Я решил, добавив atribute z-index:1500 моим дивы в 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; 
} 

Answer 2

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

Answer 3

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

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

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

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

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

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

Answer 4

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

//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)

Answer 5

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

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

Пример

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-индекс после диалогового мыши

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

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

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

Answer 6

для одного или кратные autocompletes в том же DialogBox:

// 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 7

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

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

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

Answer 8

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

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

Answer 9

$("#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 10

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

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

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

Answer 11

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

Всегда объявить ваш диалог до настройки автозаполнения.

Я включил их, et voilà!

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

Answer 12

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

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

Моя среда

• UserFrosting с JQuery 1-11.2
• бутстрап-3.3.2,
• самозагрузки покадрово
• Выбор2 v3.5.1 (тема дот-Luv)
• JQuery-щ-1.11.4

Answer 13

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

Answer 14

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

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

ссылка: ответ https://stackoverflow.com/a/22343584/5803974

Answer 15

Иоганна S 'here работал для меня.

просто добавить данные-фокус = «ложь» на кнопку или ссылку, вызывающей модальность как

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

Таким образом, вам не придется возиться с Z-индексы или переопределение самонастройки-х применять фокус (это не)