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

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

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

но

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

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

z-index: 1000

поэтому я просто изменил это на более похожее на

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

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

Answer 2

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

Answer 3

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

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

Answer 4

Добавьте следующий метод в свой 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)

Answer 5

У меня тоже была эта проблема. Я работаю в UserFrosting, у которого есть bootstrap и select2, но в ядре нет jquery-ui. Мое автозаполнение было внутри модального всплывающего окна, где тег script и $(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)

Answer 6

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

Answer 7

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

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