jQuery UI Autocomplete Width Not Set Correctly

I use this drop-in solution:

jQuery.ui.autocomplete.prototype._resizeMenu = function () {
  var ul = this.menu.element;
  ul.outerWidth(this.element.outerWidth());
}

That's basically @madcapnmckay's solution, but that doesn't need to change the original source.

I know this has long since been answered, but i think there is a better solution

$(".autocomplete").autocomplete({
    ...
    open: function() {
        $("ul.ui-menu").width( $(this).innerWidth() );
        ...
    }
    ...
});

It worked fine for me.

It turns out the problem is that the menu is expanding to fill the width of its parent element, which by default is the body. This can be corrected by giving it a containing element of the correct width.

First I added a <div> like so:

<div id="menu-container" style="position:absolute; width: 500px;"></div>

The absolute positioning allows me to place the <div> immediately after the input without interrupting the document flow.

Then, when I invoke the autocomplete, I specify an appendTo argument in the options, causing the menu to be appended to my <div>, and thus inherit its width:

$('#myInput').autocomplete({ source: {...}, appendTo: '#menu-container'});

This fixes the problem. However, I'd still be interested to know why this is necessary, rather than the plug-in working correctly.