JQuery UI autocomplete for content in bootstrap modal

Question

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

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

The tag input element:

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

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

Result given from jquery autocomplete:

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

Thanks in advance

Answer 1

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