jQueryUI自动完成功能无法与对话框和zIndex一起使用 [英] jQueryUI autocomplete not working with dialog and zIndex

问题描述

我在对话框中遇到了jQueryUI自动完成的有趣问题.

I ran into an interesting issue with jQueryUI autocomplete in a dialog box.

我的对话框HTML如下所示:

My dialog HTML looks like this:

<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自动完成功能时，它运行完美.

When I run the jQueryUI autocomplete on the above HTML, it works perfect.

当我使用对话框打开它时

When I open it up using dialog

$('#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中，我可以看到自动完成功能仍在起作用.它正在请求和接收结果，但是我在输入字段下方不再看到选项列表.

Then in FireBug, I can see autocomplete is still working. It's requesting and receiving results, but I no longer see a list of options below the input field.

我的想法是，这与对话框上的zIndex大于自动完成菜单所提供的功能有关，但我不确定. 我仍在研究正在发生的事情的确切细节，但我希望这里的人对我有所了解.

My thought is that this has something to do with the zIndex on the dialog box being much greater than what the autocomplete menu gives, but I don't know for sure. I'm still researching exact details of what's happening, but I'm hoping someone here will have some idea for me.

修改 我尝试从对话框中删除zIndex，然后我的自动完成功能开始显示. 不幸的是，我需要那个zIndex值来克服菜单栏的可怕的zIndex，这是我无法更改的(无法访问该代码区域).因此，如果有一种方法可以向自动完成功能中添加zIndex，那就太好了；在那之前，我可能只是将zIndex从对话框中删除，并确保它不会出现在菜单栏区域周围.

Edit I tried removing the zIndex from the dialog and my autocomplete starts showing up. Unfortunately, I need that zIndex value to get over the dreadfully high zIndex of the menubar, which I can't change (don't have access to that area of the code). So if there's a way to add a zIndex to the autocomplete, that would be fantastic; until then, I'll probably just remove the zIndex from the dialog and make sure it doesn't show up around the menubar area.

推荐答案

尝试设置 appendTo "#copy_dialog"的选项:

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

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

This option specifies which element the autocomplete menu is appended to. By appending the menu to the dialog, the menu should inherit the correct z-index.

这篇关于jQueryUI自动完成功能无法与对话框和zIndex一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！