title: Jquery autocomplete expanding too wide
body: <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/4RARw.png" alt="too wide suggestions list"></p>
  
  <p>In the above image, the "(1450)" should be placed on the next line.</p>
  
  <p>My jquery function:</p>
  
  <pre><code>function autosuggest() {
      $( autocomplete_field ).autocomplete(
      {
           source: posturl,
           minLength:2,
           delay: 0
      });
  };
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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; }
  </code></pre>
  
  <p>In the jquery function, I tried adding:</p>
  
  <pre><code>$('.ui-menu').css('max-width','178px')
  </code></pre>
  
  <p>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.</p>
  
  <p>I've searched the documentation of the API, but couldn't find a solution yet.</p>