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

我正在jQueryUI对话框中使用jQueryUIAutoComplete小部件。当我输入搜索文本时，文本框缩进（ui自动完成加载），但不显示任何建议

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; }

但它仍然没有表现出来。我把autocomplete放在一个“常规”页面中，效果很好

---

我使用的是jQueryUI版本1.8.2。你知道去哪里找吗？

我解决了在我的div中添加atribute

z-index:1500

因为jquery UI对话框在 1000和1005

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

---

在我的例子中，在css中添加样式不起作用，但是在将

zIndex

属性完全添加到jQuery ui元素构造函数之后，它就像一个符咒一样工作。

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

使用

appendTo

worked，排序。。。自动完成项显示在它们应该显示的位置，但是它将我的对话框窗口完全扔进了一堆乱七八糟的未正确重新定位的div元素中

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

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

我肯定1100有点过火，但我只是想稳操胜券。它工作良好，符合K.I.S.S.方法

---

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

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

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

---

它对我有用：）我通过查看模态对话框的计算样式来了解它的z索引是什么。因此，该函数所做的就是抓取jquery创建的自动建议框（通过它的一个类名，对您来说可能不同，但想法仍然相同），并修改它的css，使其包含一个比使用jquery UI 1.10时模式的z索引高1点的z索引（即1050）

，您不应该乱搞z索引（）。

appendTo

选项起作用，但会将显示限制在对话框的高度

要解决此问题，请确保autocomplete元素的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索引问题

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

参见小提琴：

---

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

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

---

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

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

---

我第一次尝试了您的初始z索引值

1006

，但没有成功。增加价值对我来说很有用

这为我带来了好处：

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

注意：$（'#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")
                        });
                    });
                }

self.AttachAutoComplete=函数（）{
$（'#accountReferenceSearch'）。焦点（函数（）{
$（“#accountReferenceSearch”）。自动完成({
来源：函数（请求、响应）{}，
最小长度：2，
延误：300，
附件：$（“#出口订单”）
});
});
}

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

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

---

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

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

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

我把它们换过来了，等等

---

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

我也有这个问题。我正在使用UserFrosting，它有引导和select2，但核心没有jQueryUI。我的自动完成在一个模式弹出窗口中，其中脚本标记和

$（document）

.ready位于模式表单的html之后。在追逐各种不存在的冲突并试图将select2（v4）变成一个组合框之后，我又回到了css hack，它成功了：

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

我的环境是

• 使用jquery 1-11.2进行用户磨砂
• bootstrap-3.3.2
• 引导模式
• 选择2 v3.5.1
• jquery-ui-1.11.4（dot-luv主题）

---

在您的

自动完成

实现中，添加

附录：“#搜索模式”

，其中搜索模式是您模式的ID。

尝试以下操作：-
我的模式：模式id
使用

autocomplete的
appendTo
属性

$（“#输入框_id”）.autocomplete（{

来源：sourceArray/link，

附录：“#我的模式”

});

参考资料：
约翰的回答对我很有用

只需将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索引或覆盖引导的强制焦点（它不被调用）
我也遇到了同样的问题，但经过一些努力，我使用Firefox找到了解决方案

在chrome中，当打开任何“自动完成”视图并希望检查元素时，当您单击任何组件时，该视图将消失

但是

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

我也做了同样的事情，我发现了一个类，它有z-索引

z-index: 1000

所以我把这个改成了

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

也许这个z-index解决方案不适合所有人，但我相信Firefox的功能肯定会帮助您找到最佳解决方案。
我们也遇到了同样的问题。我们刚刚更新了css，以便z索引足够高且不能被覆盖：

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

由于“附加到正文”会生成$window的下拉子项，因此需要生成所有下拉项
.pac-container{
    z-index: 999999;
}

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