CODEWITHSUNDEEP
jquerycssjquery-uijquery-pluginsautocomplete
JP1971
JP1971

Reputation: 880

Re-positioning Jquery UI Autocomplete Results Box

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.

Upvotes: 23

Views: 34745

Answers (4)

Savickii Stanislav
Savickii Stanislav

Reputation: 11

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

Upvotes: 1

jensgram
jensgram

Reputation: 31508

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

Upvotes: 23

goksel
goksel

Reputation: 4580

Something like this would work too

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

Upvotes: 18

Andrew Whitaker
Andrew Whitaker

Reputation: 126052

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/

Upvotes: 26

Related Questions