У меня есть автозаполнение jQueryUI, которое находится в диалоговом окне. Для некоторых старых версий jQuery/jQueryUI он отображает список возвращаемых значений, а для новейших версий - нет. Кроме того, я работаю правильно на странице с кучей других вещей, идущих даже с новой версией jQuery/jQueryUI, которая, похоже, не играет хорошо. Очевидно, что у меня что-то происходит, но это не так, но я не могу определить, что это такое. Я понимаю, что я могу использовать css для изменения z-индекса, но это кажется немного немного хакерским.
Пожалуйста, ознакомьтесь со следующими двумя живыми примерами.
http://jsbin.com/uciriq/3/ (использует jQuery 1.4.3 и jQueryUI 1.8.4)
http://jsbin.com/uciriq/2/ (использует jQuery 1.9.1 и jQueryUI 1.10.3)
Как видно (или более применимо заявлено "не видно" ), возвращаемые автозавершения соответствуют jQuery 1.9.1/jQueryUI 1.10.3 отображаются за диалогом.
Какое наилучшее решение позволяет отображать возвращенные совпадения автозаполнения?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>autocomplete with dialog</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<link href="#" onclick="location.href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css'; return false;" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<!--
<link href="#" onclick="location.href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css'; return false;" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js" type="text/javascript"></script>
-->
<script type="text/javascript">
$(function() {
$( "#search" ).autocomplete({
source: [ "one", "two", "three" ]
});
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog" class="dialog" title="Testing">
<div class="ui-widget">
<label for="search">one, two, three: </label>
<input id="search" />
</div>
</div>
</body>
</html>
РЕДАКТИРОВАТЬ Я считаю, что изменения в диалоговом окне jQueryUI, описанные http://jqueryui.com/upgrade-guide/1.10/ и дублированные ниже, являются причиной моих проблем. Я не уверен, как наилучшим образом их применять, и был бы признателен за любые советы.
Добавлена опция appendTo (# 7948). Ранее диалоги всегда добавлялись в тело, чтобы гарантировать, что они были последним элементом в DOM, чтобы избежать конфликтов с другими контекстами стекирования. Однако, чтобы обеспечить большую гибкость и упростить логику стекирования, добавлена опция appendTo, которая по умолчанию соответствует телу. Ознакомьтесь с документацией API для получения дополнительной информации.
Удаленная опция стека (# 8722). Диалоги ранее поддерживали опцию стека, которая определяла, должны ли диалоги перемещаться вверху при фокусировке. Поскольку это всегда должно быть, opiton был удален.
Убрана опция zIndex (# 8729) Аналогично опции стека опция zIndex не нужна при правильной реализации стекирования. Z-индекс определен в CSS, и теперь управление стеками контролируется тем, что сфокусированное диалоговое окно является последним элементом "stacking" в его родительском элементе.
Измените свой код, чтобы сначала создать диалог, а затем выполните автоматическое завершение. например.
$(function()
{
$("#dialog").dialog();
$( "#search" ).autocomplete({
source: [ "one", "two", "three" ]
});
});
Затем он должен работать правильно, позволяя вам видеть результаты автозаполнения.
Еще один хакерский ответ. Используйте CSS вместо jQuery для изменения дочернего элемента проблемы.
.ui-autocomplete {z-index:1000}
Вы правильно поняли, что z-index/appendTo имеют какое-то отношение к вашей проблеме.
вам нужно установить appendTo-option автозаполнения в элемент внутри диалогового окна, после чего автоматически будет отображаться автозаполнение.
caveat: Если список результатов больше, чем доступное пространство внутри диалогового окна, вы получите полосу прокрутки.
Я отредактировал ваш jsbin, чтобы отразить это: http://jsbin.com/vavevugoqi/
JS:
$( "#search" ).autocomplete({
appendTo: "#myContainer",
source: [ "one", "two", "three" ]
});
HTML:
<div id="dialog" class="dialog" title="Testing">
<div id="myContainer" class="ui-widget">
<label for="search">one, two, three: </label>
<input id="search" />
</div>
</div>
PS: Sry, чтобы выкопать такой старый вопрос, но я думаю, что это может помочь некоторым людям приехать сюда из Google (как и я).
Или для другого хакерского ответа, вы можете использовать jQuery для перемещения z-позиции. Надеюсь, кто-то придумает лучший ответ, чем мои два.
$("#search").autocomplete("widget").css('z-index',1000);
Изменение z-индекса работает только при первом открытии раскрывающегося списка, после закрытия диалоговое окно понимает, что оно "обмануто" и обновляет свой z-индекс.
Кроме того, для меня изменение порядка создания диалога и автозаполнения действительно было проблемой (думаю, большой веб-сайт, тонны страниц), но случайно у меня была собственная функция openPopup, которая завернула openDialog. Поэтому я придумал следующий хак
$("#dialog").dialog({ focus: function () {
var dialogIndex = parseInt($(this).parent().css("z-index"), 10);
$(this).find(".ui-autocomplete-input").each(function (i, obj) {
$(obj).autocomplete("widget").css("z-index", dialogIndex + 1)
});
});
Каждый раз, когда диалог имеет фокус, то есть при первом открытии и при закрытии автозаполнения, обновляется каждый z-index списка автозаполнения.
Не знаю, является ли это лучшим ответом, но вы можете переместить результаты автозаполнения после диалога.
$("#search").autocomplete("widget").insertAfter($("#dialog").parent());
Это показано в версиях интерфейса JQuery >= 11.0.0.
Билет отправлен здесь: http://bugs.jqueryui.com/ticket/10696
Изменить: Обновленный номер билета