Jquery autocomplete expanding too wide

Question

I'm using the autocomplete function from jquery, but long strings are causing the suggestion box to expand wider than the input field. You can see it in this image.

In the above image, the "(1450)" should be placed on the next line.

My jquery function:

function autosuggest() {
    $( autocomplete_field ).autocomplete(
    {
         source: posturl,
         minLength:2,
         delay: 0
    });
};

CSS:

.ui-widget-content { background: #ffffff; }
.ui-helper-hidden-accessible { position: absolute; left: -9999px; }
.ui-autocomplete { border: 1px solid #abadb3; border-top: none; position: absolute; top: 0; left: 0; cursor: pointer; }
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-menu-item { list-style:none; margin: 0px; padding: 0px; border-bottom:1px dotted #000; }
.ui-menu-item a { display: block; padding: 6px; }
.ui-menu-item:last-child { border-bottom:none; }
.ui-menu-item  strong{ color: #003b63; }
.ui-state-focus { background-color: #aad9fb; color:#000; display: block; }

In the jquery function, I tried adding:

$('.ui-menu').css('max-width','178px')

This worked for the field in the screenshot, but I have many autocomplete fields on my website with different width, so that's not an option.

I've searched the documentation of the API, but couldn't find a solution yet.

Answer 1

Try getting the width of the input fields, then change the max width of the autocomplete to that width.