模态 ui 对话框内的 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。

我认为这可能是 az 索引，所以我设置了这个：

.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 有点过大，但我只是想安全一点。效果很好，符合KISS方法。

我正在使用 jQuery 1.9.2 和 jQueryUI 1.10.2。

Answer 2

使用 jQuery UI 1.10 时，不应乱用 z 索引 (http: //jqueryui.com/upgrade-guide/1.10/#re​​moved-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 问题

单击对话框后自动完成的 z-index 似乎发生了变化（如 MatteoC 报告）。下面的解决方法似乎可以解决此问题：

请参阅小提琴： https://jsfiddle.net/sv9L7cnr/

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

Answer 3

我在引导箱中解决了这个问题，如下所示：

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

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

Answer 4

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

Answer 5

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

// 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 6

    $("#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")
                        });
                    });
                }

Answer 7

我遇到了同样的问题，当我想到：

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

我已经切换了它们，等等！

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

Answer 8

我解决了将属性 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 9

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

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

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

Answer 10

我最近也遇到了同样的问题。将其添加到我的 css 文件中为我解决了这个问题：

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

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

Answer 11

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

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

我的环境是

• UserFrosting 和 jquery 1-11.2
• bootstrap-3.3.2,
• bootstrap-modal
• select2 v3.5.1
• jquery-ui-1.11.4（dot-luv主题）

Answer 12

我遇到了同样的问题，已通过添加以下样式解决：

.ui-autocomplete { position: absolute;  cursor: default;z-index:30!important;}  
.modal-dialog {pointer-events:auto !important;}

Answer 13

在我的例子中，在 css 中添加样式不起作用，但是在将 zIndex 属性精确添加到 jQuery ui 元素构造函数之后，它就像一个魅力一样。

Answer 14

将以下方法添加到您的 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 以包含比 z-index 高 1 点的 z-index模态的 z 索引（1050）

Answer 15

这对我来说很有效：

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

Answer 16

Johann-S 的回答这里对我有用。

只需将 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 17

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

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

但

在 Firefox 中，它将连续显示，以便我们可以找到视图。

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

z-index: 1000

所以我只是将其更改为更像

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

是这个 z-index 解决方案并不适合你们所有人，但我确信 Firefox 的功能一定会帮助您找到最佳解决方案。

Answer 18

试试这个：-
my_modal ：模态 ID
使用 autocomplete 的 appendTo 属性

$("#input_box_id").autocomplete({
来源：sourceArray/link，
追加：“#my_modal”
});

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

Answer 19

将此类 ui-front 插入到您的 modal-body div 中

<div class=”modal-body ui-front“>