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

Answer 1

It seems better to use this options

appendTo: "#autocomplete_target_wrapper",
menudocking: {
    menucorner: "right top",
    inputcorner: "right bottom",
    collision: "none"
}

Official link https://forum.jquery.com/topic/autocomplete-menu-docking-position

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

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 4

Something like this would work too

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