自动完成和模态

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

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

  

如果找到具有ui-front类的元素，则菜单将附加到该元素。

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