it-swarm.com.ru

Автозаполнение jQuery-UI не отображается в диалоговом окне jQuery-UI

У меня есть автозаполнение jQueryUI, которое находится в диалоговом окне. Для некоторых старых версий jQuery/jQueryUI он отображает список возвращаемых значений, а для самых новых версий - нет. Более того, у меня он работает правильно на странице, где есть куча других вещей, даже с новой версией jQuery/jQueryUI, которая, похоже, не играет в Nice. Очевидно, что у меня происходит что-то другое, но я не могу понять, что это такое. Я понимаю, что могу использовать 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="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" 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="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" 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>

EDIT Я считаю, что изменения в jQueryUI Dialog, как описано в http://jqueryui.com/upgrade-guide/1.10/ и дублируется ниже являются причиной моих проблем. Я не совсем уверен, как их лучше применять, и буду признателен за любые советы.

Добавлена ​​опция appendTo (# 7948). Ранее к телу всегда добавлялись диалоги, чтобы гарантировать, что они являются последним элементом в DOM, чтобы избежать конфликтов с другими контекстами стека. Однако, чтобы обеспечить большую гибкость и упростить логику стекирования, была добавлена ​​опция appendTo, которая по умолчанию используется для тела. Проверьте документацию API для получения дополнительной информации.

Опция удаленного стека (# 8722) Диалоги ранее поддерживали опцию стека, которая определяла, должны ли диалоги перемещаться в верхнюю часть при фокусировке. Как это всегда должно быть, опция была удалена.

Удалена опция zIndex (# 8729) Подобно опции стека, опция zIndex не нужна при правильной реализации стекирования. Z-индекс определен в CSS, и укладка теперь контролируется путем обеспечения того, чтобы сфокусированный диалог был последним элементом "укладки" в его родительском элементе.

12
user1032531

Измените код, чтобы сначала создать диалоговое окно, а затем выполнить автозаполнение. например.

$(function()
{
  $("#dialog").dialog();
  $( "#search" ).autocomplete({
    source: [ "one", "two", "three" ]
    });
});

Затем он должен работать правильно, позволяя вам увидеть результаты автозаполнения.

24
keyneom

Еще один хакерский ответ. Используйте CSS вместо jQuery, чтобы изменить проблему ребенка.

.ui-autocomplete {z-index:1000}

http://jsbin.com/uciriq/6/edit

5
user1032531

Вы правильно догадались, что z-index/appendTo как-то связано с вашей проблемой.

вам нужно установить appendTo - опцию автозаполнения для элемента внутри диалога, тогда автозаполнение отображается правильно.

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 (например, я).

3
Stefan Erichsen

Или для другого хакерского ответа, вы можете использовать jQuery для перемещения z-позиции. Надеюсь, кто-то придумает лучший ответ, чем мои два.

$("#search").autocomplete("widget").css('z-index',1000);

http://jsbin.com/uciriq/5/

2
user1032531

Изменение z-индекса работает только при первом открытии раскрывающегося списка, после закрытия диалоговое окно обнаруживает, что оно "обмануто", и обновляет свой z-индекс.

Также для меня изменение порядка создания диалогового окна и автозаполнения действительно было проблемой (например, большой веб-сайт, тонны страниц), но случайно у меня была своя собственная функция openPopup, которая обернула открытое диалоговое окно. Итак, я придумал следующий взломать

$("#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-индекс каждого автозаполнения.

2
Johann

Это проявилось в версиях пользовательского интерфейса JQuery> = 11.0.0.

Билет размещен здесь: http://bugs.jqueryui.com/ticket/10696

Изменить: Обновлен номер билета

1
Kevin

Не знаю, является ли это лучшим ответом, но вы можете переместить результаты автозаполнения после диалога.

$("#search").autocomplete("widget").insertAfter($("#dialog").parent());

http://jsbin.com/uciriq/4/

1
user1032531