jQuery UI 自动完成在模态对话框内无法显示建议？

Question

我在jQuery UI对话框内使用jQuery UI自动完成小部件。当我输入搜索文本时，文本框会缩进（ui-autocomplet-loading），但不显示任何建议。

var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];

$("#company").autocomplete({        
    source : availableTags ,
minLength: 2
});

company是要附加自动完成的文本框的ID。

我认为它可能是一个z-index，所以我设置了这个：

.ui-autocomplete, .ui-menu, .ui-menu-item {  z-index: 1006; }

但是它仍然没有显示。我将自动完成放在了一个“普通”的页面上，它可以正常工作。

我正在使用jQuery UI版本1.8.2。有什么建议去寻找问题的原因吗？

- mango

---

尝试将appendTo选项设置为"#company"。最近也有类似的问题被问到：https://dev59.com/PGoy5IYBdhLWcg3wPLr0 - Xavi

Answer 1

当我搜索同样的问题时，我遇到了这个答案，但是没有一个解决方案完全符合我的要求。

使用appendTo似乎起作用了，自动完成项出现在了应该出现的位置，但是它完全把我的对话框窗口变成了一堆不正确重新定位的

元素混乱的信息。

因此，在我的CSS文件中，我创建了以下内容：

ul.ui-autocomplete {
    z-index: 1100;
}

我确信1100有点过头了，但我只是想保险起见。它运行良好并符合KISS方法。

我正在使用jQuery 1.9.2与jQueryUI 1.10.2。

- user256430

---

这是解决方案，非常有效，应该标记为有效！模态框的z-index属性为1050，因此您需要更多！ - Stéphane Bourzeix

这解决了我的问题。应该标记为答案。 - Fingolricks

无论将 z-index 设置为什么，都无法使其正常工作。 - Jimbo

这个解决方案缺少 !important，顺便提醒一下不要搞乱jquery-ui的z-index，因为对话框的z-index会在第一次使用后再次更改以覆盖自动完成。 - Andrea Mauro

对我来说也完美运作。在登录搜索和修改之后。 - Saket Yadav

Answer 2

在使用jQuery UI 1.10时，不应该搞乱z-indexes（http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option）。appendTo选项可以工作，但会限制对话框的显示高度。

要修复这个问题：确保自动完成元素以正确的DOM顺序存在：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问题的更新

根据MatteoC的报告，自动完成的z-index似乎会在对话框点击后发生变化。以下解决方法似乎可以解决这个问题:

查看fiddle：https://jsfiddle.net/sv9L7cnr/

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

- mhu

Answer 3

我在 bootbox 中这样解决：

$( "#company" ).autocomplete({       
    source : availableTags ,
    appendTo: "#exportOrder"
});

您只需将结果列表附加到您的表单即可。

- Allfarid Morales García

---

“在Bootstrap中”是什么意思？ - Pere

抱歉，我指的是“bootbox”。 - Allfarid Morales García

appendTo是最容易的。谢谢 - Shahrukh Ahmad

很棒的解决方案！ - Jane Cohen

Answer 4

在您的autocomplete实现中，添加appendTo: "#search_modal"，其中search_modal是您模态框的ID。

- Francisco Balam

Answer 5

    $("#company").autocomplete({        
    source : availableTags ,
    appendTo : $('#divName')
    minLength: 2
});

注意：$('#divName')中的divName将是模态框主体的名称。

示例：

<form id="exportOrder">
        <div class="input-group">
            <input type="text" id="accountReferenceSearch" placeholder="Type Account Reference to search..." class="form-control" style="width:500px">
        </div>
    </div>
</form>

self.AttachAutoComplete = function () {
                    $('#accountReferenceSearch').focus(function () {
                        $('#accountReferenceSearch').autocomplete({
                            source: function (request, response) {},
                            minLength: 2,
                            delay: 300,
                            appendTo: $("#exportOrder")
                        });
                    });
                }

- Parth Patel

Answer 6

对于同一对话框中的一个或多个自动完成功能：

// init the dialog containing the input field
 $("#dialog").dialog({
      ...
 });

// initialize autocomplete
 $('.autocomplete').autocomplete({        
      source: availableTags,
      minLength: 2
 }).each(function() {
      $(this).autocomplete("widget").insertAfter($("#dialog").parent());
 });

- Jader A. Wagner

Answer 7

我曾经遇到过同样的问题，后来意识到：

始终在设置自动完成之前声明对话框。

我把它们换了一下，et voilà！

自动完成会根据您要定位的输入自行配置。对话框会在您要定位的容器周围创建新的标记和CSS。我的选择出现在对话框后面或屏幕外。

- Charles St-Pierre

---

这是正确的答案，强制使用 z-index 只会在最近版本的 jQuery UI 上引起问题。改变初始化顺序可以解决所有问题。 - Andrea Mauro

Answer 8

我解决了一个问题，通过在jquery.autocomplete.css中的div上添加属性z-index:1500。因为Jquery UI对话框将z-index设置在1000到1005之间。

ul.auto-complete-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1500;
    max-height: 250px;
    overflow: auto;
}

- kachar

---

对我来说，只需要添加如下代码就可以了： ul.ui-autocomplete {z-index: 2100!important;} - MoniR

Answer 9

我们遇到了同样的问题。我们刚刚更新了我们的CSS，使z-index足够高并且无法被覆盖：

.dropdown-menu {
  z-index: 9999 !important;
}

作为附加到body的下拉菜单，使其成为$window的子级，您需要将所有下拉菜单设置为新的z-index。

- farpaci

Answer 10

我最近也遇到了同样的问题。将以下内容添加到我的css文件中，解决了我的问题：

.ui-autocomplete-input, .ui-menu, .ui-menu-item {  z-index: 2006; }

我最初尝试了您给出的初始z-index值为1006，但是没有起作用。增加数值后对我有用。

- Anders