раскрывающийся список автозаполнения jQuery не отображается после обновления до jQuery UI 1.10.3

В моем приложении Ruby on Rails я использовал jQuery UI 1.9.2 (через jquery-ui-rails). У меня было поле автозаполнения в модальной диалоговой форме, которая заполняла выпадающее окно предложения с помощью Ajax и Json. Он работал правильно, показывая мне правильные предложения.

Впоследствии я обновился до jQuery UI 1.10.3 (используя bundle update), и теперь выпадающее окно автозаполнения больше не работает. Он не показывает ошибки в консоли JavaScript. Фактически это показывает, что возвращаемый Json является правильный.

Я попытался переписать функцию автозаполнения в JS, чтобы выполнить вызов вручную (используя вызов Autocomplete source: $.ajax {} и по-прежнему ничего.

Мне было предложено, что проблема может заключаться в том, что jQuery изменил что-то, что заставило драгоценный камень jquery-ui-rails перестать работать, но после отправки им билета ошибки , оказывается, что это не проблема.

Любая помощь будет признательна.

обратите внимание на ответы:
приказ Министерства здравоохранения Украины ответ верен, и вы должны избегать вмешательства в z-индексы, где это возможно (именно поэтому я отметил его как правильный). Однако в моем случае (когда текстовое поле автозаполнения находится в модальном диалоговом окне) раскрывающийся список будет отображаться только в пределах ширины диалогового окна (если текст шире, он скрыт, и вы не можете использовать полосу прокрутки). Поскольку я этого не хотел, я сделал то, что описал в моем ответе ниже, и это работает. Я делал различные замечания и заметки самому себе, чтобы убедиться, что он все еще работает после любого обновления jQueryUI.

2 7
jquery autocomplete ruby-on-rails-3.2 jquery-ui-autocomplete

2 ответа:

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

Пример 

 var autoComplete,
     dlg = $("#dialog"),
     input = $("#input");

 // 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());
3

После поиска повсюду этой проблемы, я обнаружил, что ни у кого не было решения моей проблемы, так как я не мог произвести никаких сообщений об ошибках, и код, который я показал, был звуковым. После того, как кто-то предложил мне прочитать jQuery changelogs (что, по общему признанию, я не сделал), я нашел ошибку в jQuery, а также обходной путь:

В jQuery UI 1.10.1 changelog , в разделе автозаполнения он гласил: 

Added: Use .ui-front instead of .zIndex() for the suggestions menu. (7d5fe02)

Перейдя по предоставленной ссылке и просмотрев исправление кода jQuery, дал у меня есть идея: я выполнил свой поиск автозаполнения, а затем переместил модальный диалог в сторону! Именно тогда я заметил, что выпадающее меню autocoplete suggestion было позади модального диалога.

Я исправил это, добавив следующее правило CSS: 

ul.ui-autocomplete.ui-menu {
  z-index: 1000;
}

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

Я надеюсь, что это поможет и другим.

8