Autocomplete not working in Dialog

Question

Hi I have an AutoComplete on an input field. It works fine when called from a HTML view but when called using a Dialog, the dropdown list does not appear. The data appears in the dropdown if I use up & down keys but I do not see the dropdown. How can I make it work?

Answer 1

I had to change the z-index of autocomplete in order to make it work. I added the below code in my css:

.ui-autocomplete
    {
        position:absolute;
        cursor:default;
        z-index:4000 !important
    }

Answer 2

By default the dropdown is a div element which is attached to the body. As the body has a lower z-index than your modal dialog, the dropdown isn't visible.

To solve this you have to attach it to an element inside the dialog. You can do it in two ways:

• specify the appendTo option and refer to an element inside your dialog
• add the 'ui-front' class to an element which contains your autocomplete input and it's inside the dialog

In this way the dropdown div element will have the same z-index than the dialog and it will show up without problem.

I.e., if you have this:

<div id='myDialog'>
  <input id='myAutocompleteInput'>

You have to add the class like this:

<div id='myDialog' class='ui-front'>
  <input id='myAutocompleteInput'>

or specify the append to option in your autocomplete

$('#myAutocompleteInput').autocomplete({
  appendTo: '#myDialog'
  // ...
})

Reference: jquery UI dialog appendTo option.