自动完成和模态答案

【问题标题】：Autocomplete and modal自动完成和模态
【发布时间】：2015-03-13 05:15:21
【问题描述】：

我在这个 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);
});

它也不起作用。如何正确操作？

【问题讨论】：

【解决方案1】：

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

如果是jquery.ui，添加一个style标签：

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

【讨论】：

【解决方案2】：

试试这个：

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

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

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

【讨论】：

你能发布你的 HTML 结构吗？
我认为v.id 是个问题:)
@OlegSh 是的，如果你传递v 参数，它就是v.id，与this.id 相同。
@OlegSh 是的，id 应该是 # + this.id 才能成为正确的 CSS 选择器。在这种情况下，简单的v 看起来更好。
@Chad 不确定您要向我解释什么。当然，如果有人使用this，那么了解如何使用它以及在什么上下文中使用它很重要。在我的示例中，我知道this 是什么并且不会发生问题。

【解决方案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);
});

【讨论】：