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-前”。如果找到具有“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/#removed-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"})

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

Answer 6

通过自己解决这个问题，我发现在打开对话框之前必须设置appendTo。这似乎适用于设置（或修改）源属性。

$("#mycontrol").autocomplete({appendTo:"#myDialog",source:[..some values]})
$("#mycontrol").autocomplete("option","source",[...some different values]) // works

// doesn't work if the lines above come after
$("#myDialog").dialog("open")

这可能只是打开对话框的副产品，或者没有正确处理元素。但事情发生的顺序似乎很重要。

Answer 7

更改z-index仅在第一次打开下拉菜单时起作用，一旦关闭，对话框窗口就会意识到它已被“欺骗”＃34;并升级其z-index。

另外，对于我来说，更改对话框的创建顺序和自动完成真的很麻烦（想想大网站，大量的页面）但是我偶然拥有了自己的openPopup函数，它包含了opensDialog。所以我想出了以下黑客

$("#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都会更新。

Answer 8

user1357172的solution为我工作，但在我看来，它需要两个实质内容。

如果appendTo设置为null，我们可以找到最接近的.ui-front元素而不是.ui-dialog，因为我们的autocomplete应该已经附加到z-index 。然后我们应该仅为相关小部件（相关的ul列表）更改.ui-autocomplete.ui-front，而不是使用类elem.autocomplete('widget')更改所有现有元素。我们可以使用elem.autocomplete({ open: function(event, ui){ var onTopElem = elem.closest('.ui-front'); if(onTopElem.length > 0){ var widget = elem.autocomplete('widget'); widget.zIndex(onTopElem.zIndex() + 1); } } });

找到相关的小部件

解决方案：

2.3.12

顺便说一句，这个解决方案有效，但看起来有点黑客，所以它可能不是最好的。

Answer 9

创建对话框
激活自动完成

这告诉jquery自动完成是在一个对话框中，它有可用于处理z索引的信息。

Answer 10

超级简单的解决方案。增加自动完成的z-index。当它处于活动状态时，我很确定你想要它在顶部：）

.ui-autocomplete {
 z-index: 2000;
}

Answer 11

此链接对我有用。

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

使用jquery-ui-1.10.3。

我在jquery对话框的“open”事件中配置了自动完成组合框。

Answer 12

尝试了这里提到的一切（每当我将鼠标悬停在项目上并再次返回时，有些失败），但这是唯一的东西在所有情况下都适用于我：

$("selector").autocomplete({
    ...
    appendTo: "body",    // <-- do this
    close: function (event, ui){
        $(this).autocomplete("option","appendTo","body");  // <-- and do this  
    }
});

Answer 13

以下内容确保弹出窗口位于对话框上方，并且它可以比对话框大，因为它不受对话框边界的约束，而是受文档正文的约束。

elem.autocomplete({
    appendTo: "body",
    position: {
        my: "left top",
        at: "left bottom",
        collision: "fit flip",
        of: elem,
        within: window
    },
    open: function(event, ui){
        var dialog = $(this).closest('.ui-dialog');
        if(dialog.length > 0)
            $('.ui-autocomplete.ui-front').zIndex(dialog.zIndex()+1);
    }
});

Answer 14

open:function(event){

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

},

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

14 个答案: