jQueryUI autocomplete not working with dialog and zIndex

Question

I ran into an interesting issue with jQueryUI autocomplete in a dialog box.

My dialog HTML looks like this:

Answer 1

user1357172's solution worked for me but in my opinion it needs two imprevements.

If appendTo is set to null, we can find the closest .ui-front element instead of .ui-dialog, because our autocomplete should be already attached to it. Then we should change the z-index only for related widget (related ul list) instead of changing all existing elements with class .ui-autocomplete.ui-front. We can find related widget by using elem.autocomplete('widget')

Solution:

elem.autocomplete({
    open: function(event, ui){
        var onTopElem = elem.closest('.ui-front');
        if(onTopElem.length > 0){
            var widget = elem.autocomplete('widget');
            widget.zIndex(onTopElem.zIndex() + 1);
        }
    }
});

BTW this solution works but it looks bit hacky, so it is not probably the best one.