I'm having trouble with jquery-ui autocomplete and slider on the same form (z-index) related

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 autocomp

Answer 1

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... */ }
        })
    }
});

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

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."