jquery UI autocomplete inside a modal ui dialog - suggestions not showing?

Question

i am using the jquery ui autocomplete widget inside the jquery ui dialog. when i type in the search text, the textbox indents (ui-autocomplet-loading) but does not show any suggestions.

var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];

$("#company").autocomplete({        
    source : availableTags ,
minLength: 2
});

company is the id of the textbox to attach the autocomplete.

i thought it might be a z index so i set this:

.ui-autocomplete, .ui-menu, .ui-menu-item {  z-index: 1006; }

but it still does not show. i put the autocomplete in a 'regular' page and it works fine.

i am using jquery ui version 1.8.2. any ideas of where to look?

Answer 1

I came across this answer when searching for this same issue, however none of the solutions were exactly what I wanted.

Using appendTo worked, sorta... The autocomplete items showed up where they were supposed to, however it completely threw my dialog window into a garbled mess of improperly repositioned div elements.

So in my own css file, I created the following:

ul.ui-autocomplete {
    z-index: 1100;
}

I'm sure 1100 is a little overkill, but I just wanted to play it safe. It works well and conforms with the K.I.S.S. method.

I'm using jQuery 1.9.2 with jQueryUI 1.10.2.