模式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。

我想它可能是一个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.方法。

我正在使用带有jQueryUI 1.10.2的jQuery 1.9.2。

Answer 2

在使用jQuery UI 1.10时，不应该使用z索引(http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option)。appendTo选项有效，但会将显示限制为对话框的高度。

解决方法:使用: autocomplete.insertAfter(dialog.parent())确保自动完成元素的DOM顺序正确

示例

 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报道)。下面的解决方法似乎解决了这个问题：

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

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

Answer 3

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

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

您只需将结果列表追加到表单中即可。