Автозаполнение jQueryUI не работает с диалогом и zIndex - PullRequest
Новая
       37

Автозаполнение jQueryUI не работает с диалогом и zIndex

37 голосов
/ 31 декабря 2011

Я столкнулся с интересной проблемой с автозаполнением jQueryUI в диалоговом окне.

Мой диалог HTML выглядит так: 

<div id="copy_dialog">
    <table>
        <tbody>
            <tr>
                <th>Title:</th>
                <td><input type="text" class="title" name="title"></td>
            </tr>
            <tr>
                <th>Number:</th>
                <td><input type="text" name="number"></td>
            </tr>
        </tbody>
    </table>
</div>

Когда я запускаю автозаполнение jQueryUI в приведенном выше HTML, оно отлично работает.

Когда я открываю его с помощью диалога 

$('#copy').click(function()
{
    $('#copy_dialog').dialog({
        autoOpen: true,
        width: 500,
        modal: false,
        zIndex: 10000000,
        title: 'Duplicate',
        buttons: {
            'Cancel': function()
            {
                $(this).dialog('close');
            },
            'Save': function()
            {
                $(this).dialog('close');
            }
        }
    });

    return false;
});

Тогда в FireBug я вижу, что автозаполнение все еще работает. Он запрашивает и получает результаты, но я больше не вижу список опций под полем ввода.

Я думаю, что это как-то связано с тем, что zIndex в диалоговом окне намного больше, чем дает меню автозаполнения, но я точно не знаю. Я все еще исследую точные детали того, что происходит, но я надеюсь, что кто-то здесь будет иметь некоторую идею для меня.

Редактировать Я попытался удалить zIndex из диалогового окна, и мое автозаполнение начинает появляться. К сожалению, мне нужно это значение zIndex, чтобы преодолеть ужасно высокое значение zIndex в строке меню, которое я не могу изменить (у меня нет доступа к этой области кода). Так что, если есть способ добавить zIndex к автозаполнению, это было бы замечательно; до тех пор я, вероятно, просто удаляю zIndex из диалогового окна и проверяю, не отображается ли он вокруг области меню.

Ответы [ 14 ]

0 голосов
/ 04 июля 2016 
open:function(event){

        var target = $(event.target); 
        var widget = target.autocomplete("widget");
        widget.zIndex(target.zIndex() + 1); 

},
0 голосов
/ 21 декабря 2015

Для меня сработала комбинация из поста выше. Я добавил myModal ID вместо body и также добавил событие close. 

$("selector").autocomplete({
    ...
    appendTo: "#myModalId",    // <-- do this
    close: function (event, ui){
        $(this).autocomplete("option","appendTo","#myModalId");  // <-- and do this  
    }
});
0 голосов
/ 16 февраля 2015

Пробовал все упомянутое здесь (некоторые терпели неудачу, когда я наводил курсор на предметы и возвращался снова), но это единственное , которое работало для меня во всех случаях: 

$("selector").autocomplete({
    ...
    appendTo: "body",    // <-- do this
    close: function (event, ui){
        $(this).autocomplete("option","appendTo","body");  // <-- and do this  
    }
});
0 голосов
/ 02 июля 2013

Эта ссылка работала для меня.

https://github.com/taitems/Aristo-jQuery-UI-Theme/issues/39

Я использую jquery-ui-1.10.3.

Я настроил комбинированный список автозаполнения внутри "open"событие диалога jquery.

Страница:
...