JQuery用户界面自动完成在引导模式内容 [英] JQuery UI autocomplete for content in bootstrap modal

问题描述

我有AJAX产生的引导模式这有一个使用标签输入插件，也元素含量 jQuery的自动完成的建议。

I have AJAX generated content in bootstrap modal which have elements that using tags-input plugin and also jquery autocomplete for suggestion.

这些工具的正常工作，当元素存在断模式。所以，当我使用引导模式与 jQuery的自动完成问题发生。意味着自动完成列表不会被体现出来了。但是结果会回来从服务器

These tools work properly when the element exist off the modal. So problem occur when I use bootstrap modal with jquery autocomplete. Means the autocomplete list won't be shown up anymore. But result will come back from server

标签输入元素：

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

JS其中呼叫发起者：

JS which call initiator:

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

最后，我的启动：

And eventually my initiator:

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

这是jquery的自动完成给定的结果：

Result given from jquery autocomplete:

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

在此先感谢

推荐答案

这是的z-index 的问题，给予自动完成结果列表更高的优先级只加波纹管 CSS 类，并添加属性：

That is z-index issue, to give auto complete result listing higher priority just add bellow css class and add property:

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

这篇关于JQuery用户界面自动完成在引导模式内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！