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索引所以我设置了这个：

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

但它仍未显示。我将自动填充功能放在“常规”页面中，并且工作正常。

我使用的是jquery ui版本1.8.2。任何关于在哪里看的想法？

Answer 1

我在搜索同样的问题时遇到了这个问题，但是没有一个解决方案正是我想要的。

使用appendTo工作，排序...自动完成项目显示在他们应该的位置，但是它完全将我的对话窗口扔进了一堆乱七八糟的不正确重新定位的div元素。

所以在我自己的css文件中，我创建了以下内容：

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

我确信1100有点矫枉过正，但我只想安全地玩。它运作良好，符合K.I.S.S.方法

我正在使用jQuery 1.9.2和jQueryUI 1.10.2。

Answer 2

使用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 3

对于同一对话框中的一个或多个自动填充：

// 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());
 });

Answer 4

我在bootbox中解决了这个问题：

char loop='y';
while(loop == 'y') {

    //Do your stuff here

    printf("do you want to loop? (y/n) ");
    scanf(" %c", &loop);
    if(loop != 'y')
        loop='n';
}

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

Answer 5

我解决了将属性z-index:1500添加到我的div中的问题 jquery.autocomplete.css因为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;
}

Answer 6

在autocomplete实施中，添加appendTo: "#search_modal"，其中 search_modal 是您的模式的ID。

Answer 7

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

注意：$（＆＃39; #divName＆＃39;）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")
                        });
                    });
                }

Answer 8

我最近遇到了同样的问题。添加到我的css文件解决了它：

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

我首先尝试了您的初始z-index值1006，但这不起作用。增加价值对我有用。

Answer 9

当我遇到这个问题时，我遇到了同样的问题：

在设置自动填充之前始终声明对话框。

我已将它们换掉了，等等！

自动完成功能在您定位的INPUT周围进行配置。 Dialog在您定位的容器周围创建新的标记和CSS。我选择出现在对话框后面或屏幕外。

Answer 10

我们有同样的问题。我们刚刚更新了CSS，以使z-index足够高并且不能被覆盖：

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

在body后面添加$ window的下拉子项时，您需要将所有下拉菜单设置为新的z-index。

Answer 11

我遇到了同样的问题，但经过一番努力，我使用Firefox来寻找解决方案。

在Chrome中打开任何自动完成视图并且您想要检查该元素时，当您单击任何组件时，该元素将消失。

但

在Firefox中，会不断显示，以便我们可以找到该视图。

我做了同样的事情，我发现了一个有z-index

的类

z-index: 1000

所以我把它改成了更像

.pac-container{
    z-index: 999999;
}

可能这个z-index解决方案不适用于所有人，但我确信Firefox的功能肯定会帮助您找到最佳解决方案。

Answer 12

Johann-S的回答here为我工作。

只需将data-focus =“false”添加到调用模式的按钮或链接

<button type="button" class="btn btn-primary" 
 data-toggle="modal" 
 data-focus="false"
data-target=".bd-example-modal-sm">Small modal</button>

这样你就不必乱用z索引或覆盖bootstrap的强制执行焦点（它没有被调用）

Answer 13

试试这个： -
my_modal ：模态ID
使用appendTo的{{1}}属性

autocomplete 参考： https://stackoverflow.com/a/22343584/5803974

Answer 14

我也有这个问题。我在UserFrosting工作，它有bootstrap和select2，但在核心中没有jquery-ui。我的自动完成功能位于模式弹出窗口中，其中脚本标记和$(document)。ready位于模式窗体的html之后。在追逐各种不存在的冲突并尝试将select2（v 4）组合成一个组合框之后，我又回到了css hack，这很有效：

.ui-autocomplete {z-index: 1061 !important;}

我的环境是

使用jquery 1-11.2进行UserFrosting
自举-3.3.2，
自举模态
select2 v3.5.1
jquery-ui-1.11.4（dot-luv theme）

Answer 15

这对我有用：

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

Answer 16

将以下方法添加到您的javascript中，并从body元素的onload事件中调用它：

//initialization
function init(){
    var autoSuggestion = document.getElementsByClassName('ui-autocomplete');
    if(autoSuggestion.length > 0){
        autoSuggestion[0].style.zIndex = 1051;
    }
}

它对我有用:)我通过查看模态对话框的计算样式来查看它的z-index是什么。因此，所有函数都是抓取由jquery创建的自动建议框（通过其中一个类名，可能与您不同，但想法仍然相同）并修改它的css以包含高于1的z-index 1个点模态的z指数（1050）

Answer 17

在我的情况下，在css中添加样式不起作用，但在将zIndex属性完全添加到jQuery ui元素构造函数之后，它就像魅力一样。

在模式ui对话框中的jquery UI自动完成 - 建议没有显示？

17 个答案: