自动完成在对话框中不起作用答案

【问题标题】：Autocomplete not working in Dialog自动完成在对话框中不起作用
【发布时间】：2013-05-01 21:08:46
【问题描述】：

您好，我在输入字段上有一个自动完成功能。从 HTML 视图调用时它工作正常，但使用对话框调用时，下拉列表不会出现。如果我使用向上和向下键，数据会出现在下拉列表中，但我看不到下拉列表。我怎样才能让它发挥作用？

【问题讨论】：

您必须提供更多信息...例如：控制台上的任何 js 错误？
使用“选择器”时需要考虑的事项。当您在某处的<body> 中创建对话框HTML 时，请记住，只要您在其上调用.dialog，它就会“移动”。也就是说，jQueryUI 围绕它构建了一个花哨的包装器，并将其附加到正文中。因此，如果您的“选择器”为您进行自动压缩，类似于$("body #somecontainer .my-auto-c") && 您的对话框也在#somecontainer 中，那么每当您将对话框放入对话框时，您的原始选择器将不再起作用，因为它不再位于那个容器。
创建一个jsfiddle。显示您的代码超过 1000 个单词；）
@SpYk3HH 可能你是对的。如果我禁用 jquery ui.css，我可以看到我的自动竞争下拉列表。它出现了，但不知何故，当我包含 css 时，对话框的主体出现在前台，而下拉菜单出现在后台。我不知道如何解决这个问题。让我知道你的意见。谢谢
@user1596433 最简单的解决方法，如果您要将自动完成放在对话框中，请给该对话框一个 ID，然后根据对话框 ID 为该自动完成进行所有选择。示例：<div id="myDialog"><input name="myAC" /> 那么你的 CSS 将类似于 #myDialog .ui-autocomplete-input { 并且你的 jQuery 选择器将在相同的上下文中：$("#myDialog input[name=myAC]") 或在设置 ac 之后 $("#myDialog .ui-autocomplete-input") [请记住，jQuery 将添加我在这里展示的类之后自动完成已初始化。

标签： jquery jquery-ui autocomplete jquery-ui-dialog

【解决方案1】：

默认情况下，下拉列表是附加到正文的 div 元素。由于正文的 z-index 低于模态对话框，因此下拉菜单不可见。

要解决这个问题，您必须将其附加到对话框内的元素。你可以通过两种方式做到这一点：

指定appendTo 选项并引用对话框中的元素
将'ui-front' 类添加到包含您的自动完成输入且位于对话框内的元素中

这样，下拉 div 元素将具有与对话框相同的 z-index 并且它会毫无问题地显示出来。

即，如果你有这个：

<div id='myDialog'>
  <input id='myAutocompleteInput'>

你必须像这样添加类：

<div id='myDialog' class='ui-front'>
  <input id='myAutocompleteInput'>

或在自动完成中指定附加到选项

$('#myAutocompleteInput').autocomplete({
  appendTo: '#myDialog'
  // ...
})

参考：jquery UI dialog appendTo option。

【讨论】：

我认为appendTo 是下拉列表应该附加到的元素，因此我将appendTo 设置为带有自动完成功能的输入（这对我不起作用）。但是像您在示例中所做的那样，将appendTo 设置为指向我的对话框（其中包含深入的自动完成输入）是可行的。谢谢！

【解决方案2】：

我必须更改自动完成的 z-index 才能使其正常工作。我在我的 css 中添加了以下代码：

.ui-autocomplete
    {
        position:absolute;
        cursor:default;
        z-index:4000 !important
    }

【讨论】：

此解决方案有效，但不是最好的方法，而且可能很麻烦。您宁愿在我的回答中使用该解决方案。

【解决方案3】：

您可能有多个具有相同 ID o 类的选择器。

【讨论】：

那么在这种情况下，在对话框外调用时它应该不起作用。