Re-positioning Jquery UI Autocomplete Results Box

Question

I am using the Jquery UI Autocomplete plugin for a straight forward search term suggestion tool. It is up and running with no problems except that I cannot move the results box. I basically need to move it 20 pixels to the left and 4 pixels down. I have attempted to overwrite the Jquery UI CSS, but have not been able to reposition the box.

Any help from someone experienced with this issue would be greatly appreciated.

Answer 1

Here's one way you could do it, tapping into the open event and changing the position of the menu when that event occurs:

$("#autocomplete").autocomplete({
    appendTo: "#results",
    open: function() {
        var position = $("#results").position(),
            left = position.left, top = position.top;

        $("#results > ul").css({left: left + 20 + "px",
                                top: top + 4 + "px" });

    }
});

I'm also using the appendTo option to make finding the ul that contains the menu easily. You could do it without this option though.

Here's a working example: http://jsfiddle.net/9QmPr/

Answer 2

This can be easily achieved via the position option, specifically the offset property:

$('#myField').autocomplete({
    source: …,
    position: {
        offset: '20 4' // Shift 20px to the left, 4px down.
    }
});

Answer 3

Something like this would work too

open : function(){
        $(".ui-autocomplete:visible").css({top:"+=5",left:"-=2"});
    },