У меня есть автозаполнение 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" в его родительском элементе.
