在模式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-indexes(http://jqueryui.com/upgrade-guide/1.10/#re​​moved-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

我在启动箱中这样解决了它：

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

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

Answer 5

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

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

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