Auto complete Appearing behind the Modal popup

Question

I am using simple jquery popup and Auto complete of jQuery Auto complete .The code of Auto complete is something like this.

$("#tags").autocomplete({
    source: NameArray
});

where tags is the textbox id and NameArray is Array of string.However this code in the Modal pop-up like this-

function openFilterPopUp() {

    $("#tags").autocomplete({
        source: NameArray
    });
    $("#openFilterPopUp").dialog({
        resizable: false,
        height: 240,
        modal: true,
        buttons: {
            "ok": function() { $(this).dialog("close"); },
            Cancel: function() { $(this).dialog("close"); }
        }
    });

}

The data for Autocomplete is appearing fine but its appearing behind the popup.Please Help. Any help will be appreciated.

score 18 · Accepted Answer · answered Mar 12 '14 at 06:25

18

Add appendTo property of autocomplete

$("#tags").autocomplete({
    source: NameArray,
    appendTo : _parentElement
});

_parentElement can be your modal body

answered Mar 12 '14 at 06:25

mulla.azzi

2,676
4
18
25

2

Thanks, I upvoted because this solved my problem within seconds of searching for a solution. You can use an element's ID in the appendTo option like so `appendTo: "#your_element_id"`. Just to add the official documentation for the appendTo option: https://api.jqueryui.com/autocomplete/#option-appendTo – Ken Sawyerr Apr 04 '18 at 15:44

score 2 · Answer 2 · answered Mar 12 '21 at 02:06

2

I try this code and success :

$("#tagsname").autocomplete({
    appendTo : "#modalform",
    source: DataArray
    
});

answered Mar 12 '21 at 02:06

Rofiq Azhari

21
1

Auto complete Appearing behind the Modal popup

2 Answers2

Linked