jQueryUI自动完成不使用对话框和zIndex

Question

我在对话框中遇到了一个有趣的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>

当我在上面的HTML上运行jQueryUI自动完成时,它完美无缺.

当我用对话框打开它时

$('#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,并确保它不会出现在菜单栏区域周围.

Answer 1

尝试将appendTo选项设置为"#copy_dialog":

$(/** autocomplete-selector **/)
    .autocomplete("option", "appendTo", "#copy_dialog");

此选项指定附加自动完成菜单的元素.通过将菜单附加到对话框,菜单应继承正确的z-index.

Answer 2

appendTo:菜单应附加到哪个元素.当值为null时,将检查输入字段的父级是否为"ui-front"类.如果找到具有"ui-front"类的元素,则菜单将附加到该元素.无论值如何,如果未找到任何元素,菜单将附加到正文.

这意味着<div id="copy_dialog" class="ui-front">可以做到这一点.无需使用appendTo对我不起作用的选项.

Answer 3

'appendTo'选项并不总是有效.

最令人震惊的是,它不会显示超出对话框的高度,但是,如果您使用的是第三方实用程序(例如DataTables编辑器),则无法始终控制何时创建对话框,输入等,当他们附加到DOM,他们有什么ID,等等.

这似乎总能奏效:

$(selector).autocomplete({
    open: function(event, ui){
        var dialog = $(this).closest('.ui-dialog');
        if(dialog.length > 0){
            $('.ui-autocomplete.ui-front').zIndex(dialog.zIndex()+1);
        }
    }
});

Answer 4

使用jQuery UI 1.10时,不应该使用z-indexes(http://jqueryui.com/upgrade-guide/1.10/#re​​moved-stack-option).该appendTo选项有效,但会将显示限制为对话框的高度.

要修复它:确保自动完成元素的顺序正确:autocomplete .insertAfter(dialog .parent())

例

 var autoComplete,
     dlg = $("#copy_dialog"),
     input = $(".title", dlg);

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

单击对话框后更新z-index问题

单击对话框后,自动填充的z-index似乎发生了变化(由MatteoC报告).下面的解决方法似乎解决了这个问题:

请参阅小提琴:https://jsfiddle.net/sv9L7cnr/

// initialize autocomplete
input.autocomplete({
    source: ...,
    open: function () {
        autoComplete.zIndex(dlg.zIndex()+1);
    }
});

Answer 5

我记得自动完成和zIndex有类似的问题,并且必须通过指定appendTo选项来修复它: $(selector).autocomplete({appendTo: "#copy_dialog"})

如果您在定位元素中有自动完成功能,这也很有用.我遇到的具体问题是在主体滚动时固定位置元素内的自动完成.自动完成功能正确显示,然后与正文滚动而不是保持固定.