jQuery's Autocomplete dropdown is not showing after upgrade to jQuery UI 1.10.3

Question

In my Ruby on Rails app I was using jQuery UI 1.9.2 (through jquery-ui-rails). I had an Autocomplete field in a Modal Dialog form that was populating it's dropdown suggestion box using Ajax and Json. It worked correctly, showing me the correct suggestions.

I subsequently upgraded to jQuery UI 1.10.3 (using bundle update) and now the Autocomplete dropdown suggestion box is no longer working. It shows no error in the JavaScript console. In fact it shows that the Json that is returned is correct.

I have tried rewriting the autocomplete function in JS to perform the call manually (using the Autocomplete's source: $.ajax {} call and still nothing.

It was suggested to me that the problem might be that jQuery changed something that caused the jquery-ui-rails gem to stop working, but after submitting a bug ticket to them, it turns out that that is not the problem.

Any help would be appreciated.

NOTE to Answers:
mhu's answer is correct, and you should avoid tampering with the z-Indexes where possible (which is why I marked it as correct). However in my case (where the Autocomplete text box is in a Modal Dialog) the drop down will only be displayed within the width of the dialog box (if the text is wider than that, it is hidden and you cannot use the scrollbar). As I did not want that, I did what I described in my answer below and it works. I did make various comments and notes to myself to make sure it still works after any jQueryUI update.

Yenyenisei

Answer 1

When using jQuery UI 1.10, you should not mess around with z-indexes (http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option). Just make sure the autocomplete element is in the correct DOM order with: autocomplete.insertAfter(dialog.parent())

Example

 var autoComplete,
     dlg = $("#dialog"),
     input = $("#input");

 // initialize autocomplete
 input.autocomplete({
     ...
 });

 // get reference to autocomplete element
 autoComplete = input.autocomplete("widget");

 // init the dialog containing the input field
 dlg.dialog({
      ...
 });

 // move the autocomplete element after the dialog in the DOM
 autoComplete.insertAfter(dlg.parent());

Molehill

But this is so much more complicated than before... I know you might not know the reason, but this seems like I suddenly have to perform 2 more steps than before – Yenyenisei

It's really just one statement: autoComplete.insertAfter(dlg.parent());. The rest is just the standard stuff you always need to setup the autocomplete. – Molehill

OK That makes sense. But why did you reference the autocomplete("widget") like that? I have never needed to do that – Yenyenisei

You could also use $(".ui-autocomplete"), but that would target all autocomplete-elements on the page, instead of the just the one attached to input. – Molehill

and in case you came here having a similar problem with autocomplete inside a colorbox: autoComplete.insertAfter($('#cboxLoadedContent').parent()); – Wes

Answer 2

After searching everywhere for this issue, I found that nobody had a solution to my problem as I could not produce any error messages and the code I showed was sound. After someone suggested I read the jQuery changelogs (which admittedly I hadn't), I found the bug in the jQuery as well as workaround:

In the jQuery UI 1.10.1 changelog, under the Autocomplete section it read:

Added: Use .ui-front instead of .zIndex() for the suggestions menu. (7d5fe02)

Following the link provided and looking through the jQuery code fix, gave me an idea: I performed my Autocomplete search, and then I moved the Modal Dialog to the side! That's when I noticed the Autocoplete dropdown suggestion menu was behind the Modal Dialog.

I fixed this by adding the following CSS rule:

ul.ui-autocomplete.ui-menu {
  z-index: 1000;
}

I have submitted a Bug ticket to jQuery, so I'm hoping it will be dealt with by 1.10.4 so that the workaround is no longer needed.

I hope this helps others too.

Yenyenisei