JQuery UI 自动完成 bootstrap 模式中的内容

Question

我在 bootstrap modal 中 AJAX 生成了内容，其中包含使用 tags-input 插件的元素以及 jquery autocomplete 的建议。

当元素存在于模式之外时，这些工具可以正常工作。所以当我使用 bootstrap modal 和 jquery autocomplete 时会出现问题。意味着自动完成列表将不再显示。但结果将从服务器返回

标签输入元素：

<input type="text" class="form-control" name="keyword[]" data-toggle="tag_autocomplete" />

调用发起者的JS：

tag_autocomplete('[data-toggle="tag_autocomplete"]');

最后我的发起人：

function tag_autocomplete(selector)
{
    $(selector).tagsInput({
        autocomplete_url: base_url + 'tag/autocomplete',
        width:'auto',
        defaultText:'+',
        minChars: 2,
        maxChars : 50,
        placeholderColor : '#666666'
    });
}

jquery 自动完成给出的结果：

[{tag_id: "3", label: "hossein", value: "hossein"}]
    0: {tag_id: "3", label: "hossein", value: "hossein"}

提前致谢

Answer 1

这是 z-index 问题，要给予自动完成结果列表更高的优先级，只需在下面添加 css class 并添加 属性:

.ui-autocomplete
{
    z-index: 99999; //Maximum and top of everything (not absolutely :| )
}