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。