I'm having trouble with jquery-ui autocomplete

Question

I'm attempting to create a web page using the jQuery ui lib. My design uses a jQuery ui autocomplete on an input field at the top of a form. Immediately below this autocomplete input form are some jQuery sliders. The issue is that when the auto complete box populates the results are displayed behind the handle of the slider control. This comes from the way that jQuery builds the sliders which makes pieces of them have a z-index of 3. The z-index of the drop down portion of the jquery autocomplete control appears to always be set to 1. I tried increasing the z-index of the input element that is being auto completed but that doesn't seem effect the z-index of the element jquery creates for the autocomplete drop down. I also tried writing my own javascript to get the drop down menu element by class(it is a ul) and manually set it's z-index. This doesn't seem to work either. I'm assuming this means, somehow the jQuery code is overwriting the z-index change that I'm making. This isn't a browser bug as it is a problem on Firefox, Chrome, Safari and IE. It is a problem with the actual z-index jQuery gives the drop down box (UL element).

Does anyone have a solution to this problem? How does one generally go about fiddling with elements that jQuery automatically generates to build it's controls.

Answer 1

According to http://bugs.jqueryui.com/ticket/5238, there seem to be 2 solutions for this.

"Changing the z-index to 3 seems to fix this completely."

You can do this on your css, you just need to add "!important" to override the value the library sets:

ul.ui-autocomplete {
    z-index: 3 !important;
}

Or, "set position:relative on autocomplete input, so that .zIndex() can actually compute the z-index."

Answer 2

Using the open and close events to modify the z-index worked for me:

$( "#tags" ).autocomplete({
  source: availableTags,      
  open: function(event, ui) { $(".ui-slider-handle").css("z-index", -1); },
  close: function(event, ui) { $(".ui-slider-handle").css("z-index", 2); }
});

See a demo here.

Answer 3

This is what I did to set the z-index for autocomplete:

$("#myInputId").autocomplete({
    open: function () { $('.ui-autocomplete').css('z-index', 50); },
    source: function (request, response) {
        $.ajax({
            url: "some url",
            type: "POST",
            dataType: "json",
            data: { /* some code... */ },
            success: function (data) { /* some code... */ }
        })
    }
});