Re-positioning Jquery UI Autocomplete Results Box

jquery css jquery-ui jquery-plugins autocomplete

33,455

Solution 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/

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

Solution 3

Something like this would work too

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

Solution 4

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

View more solutions

33,455

JP1971

I received my first computer, a hand-me-down Apple II+, from my Grandaddy during the dawn of the personal computer revolution of the 1980s. I spent a good deal of my teenage years learning Applesoft BASIC and Fortran, writing GUI menus for 5.25" floppies and hacking hex values in Ultima player files. Since then, I've built predictive supply chain tools for the restaurant industry, iOS control applications for music performance and robotics and numerous PHP web applications for industries ranging from fashion retail and the arts to digital publishing.

Updated on July 09, 2022

Comments

JP1971 almost 2 years

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.
JP1971 almost 13 years

When I incorporate this code into the project that I'm working on, I receive a this.menu is undefined error.
Andrew Whitaker almost 13 years

@JP1971: I can't help you unless you post some code. You might want to open up another question for better results.
Tsukimoto Mitsumasa over 11 years

what if I want to resize my <ul> such that its width is as the same as the width of my <input> ?
Andrew Whitaker over 11 years

Did you try: $("#results > ul").width($("#results").width());?
Tsukimoto Mitsumasa over 11 years

@AndrewWhitaker, I tried your solution and it worked on FF, Chrome and IE8-9 but not on IE7, here's how I did it, appendTo: "#results", open: function(){ var position = $("#results").position(), left = position.left, top = position.top; $("#results > ul").css({left: (left + 15) + "px", top: (top + 30) + "px", width: (206) + "px", float: "left"}); } did I do something wrong? I mean the things is, on IE7 my autocomplete results are not located below my #results div unlike on other browsers.
martinedwards almost 9 years

Hero! I found this AFTER hack the position on open.
Ben Gripka over 8 years

Be sure to look at all the settings available with the position option here api.jqueryui.com/position
ron over 5 years

Perfect. This worked for me using 1.12.1 while position property did not work.
Prateek over 5 years

Worked For me. Thanks.