jquery-ui - 模态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 index 所以我设置了这个：

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

但它仍然没有显示。我将自动完成功能放在“常规”页面中，效果很好。

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

score 73 · Accepted Answer

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

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

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

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

我敢肯定 1100 有点矫枉过正，但我只是想安全一点。它运行良好并且符合 KISS 方法。

我将 jQuery 1.9.2 与 jQueryUI 1.10.2 一起使用。

score 14 · Accepted Answer

使用 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 问题

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

见小提琴：https ://jsfiddle.net/sv9L7cnr/

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

score 10 · Accepted Answer

我在引导箱中解决了这个问题：

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

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

score 7 · Accepted Answer

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

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

score 6 · Accepted Answer

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

score 5 · Accepted Answer

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

score 3 · Accepted Answer

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

score 3 · Accepted Answer

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

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

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

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

score 2 · Accepted Answer

我最近有同样的问题。将此添加到我的 css 文件中为我解决了它：

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

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

score 2 · Accepted Answer

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

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

由于追加到 body 使 $window 的下拉子菜单，您需要将所有下拉菜单添加到新的 z-index。

score 1 · Accepted Answer

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

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

我的环境是

使用 jquery 1-11.2 的 UserFrosting
引导程序-3.3.2，
引导模式
选择2 v3.5.1
jquery-ui-1.11.4 (dot-luv 主题)

score 0 · Accepted Answer

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

score 0 · Accepted Answer

将以下方法添加到您的 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（为 1050）

score 0 · Accepted Answer

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-indexes 或覆盖引导程序的强制焦点（它没有被调用）

score 0 · Accepted Answer

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

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

但

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

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

z-index: 1000

所以我只是把它改成了更像

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

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

score 0 · Accepted Answer

试试这个：- my_modal : modal id 使用属性

appendToautocomplete

$("#input_box_id").autocomplete({ source:sourceArray/link, appendTo :"#my_modal" }); 参考： https ://stackoverflow.com/a/22343584/5803974

score 0 · Accepted Answer

0

这对我有用：

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

于 2015-08-25T11:38:48.053 回答

jquery-ui - 模态ui对话框中的jquery UI自动完成 - 建议未显示？

17 回答 17

Related

Reference