自动完成和模态

Question

我在这个 div 中有一个模式 div 和文本框。我想为文本框设置自动完成功能。要为自动完成正确设置 z-index，我使用以下代码：

$('.autocompleteTextbox')
    .autocomplete("option", "appendTo", "#my_dialog");

它工作正常，但我想为许多模态 div 设置它，这些 div 是自动生成的

所以，我试试这个代码：

var ac = $('.autocompleteTextbox');
$('.modal').each(function(i,v) {
    var id = v.id;
    ac.autocomplete("option", "appendTo", id);
});

没用

$('.modal').each(function(i,v) {
    var id = v.id;
    ac.autocomplete("option", "appendTo", v);
});

也不行。如何正确操作？

Answer 1

试试这个：

$('.modal').each(function () {
    $(this).find('.autocompleteTextbox').autocomplete("option", "appendTo", '#' + this.id);
});

另一种选择是将 class ui-front 添加到 .modal div。在这种情况下，您不需要指定 appendTo 选项，因为

If an element with the ui-front class is found, the menu will be appended to that element.

Answer 2

您将 div 的 z-index 更改为自动完成的结果：

如果是jquery.ui添加样式标签：

<style>
.ui-autocomplete { 
           position: absolute;
           cursor: default;
           z-index:999 !important;
}  
</style>

Answer 3

找到解决方案

    $('.modal').each(function(i,v)
    {
        $(this).find('.autocompleteTextbox').autocomplete("option", "appendTo", v);
    });

或

    $('.modal').each(function(i,v)
    {
        $(this).find('.autocompleteTextbox').autocomplete("option", "appendTo", this);
    });

或

$('.modal').each(function(i,v)
{
    $(this).find('.autocompleteTextbox').autocomplete("option", "appendTo", '#' + this.id);
});

Autocomplete and modal