Changing width of jquery-ui autocomplete widgets individually

Question

I\'m working with mutiple jquery-ui autocomplete widgets on one page and want to be able to set the widths of each one individually. Currently, I\'m doing it like this:

Answer 1

You could wrap the input box that is triggering the auto-complete in a div, give the div a specific id, and then append the auto complete ul to that div rather than to the body of the document. That way you can target it with css based upon the div.

<!- this is how i would set up the div -->
<div class='autoSuggestWrapper' id='wrapper1'>
     <input class='autocomplete'>
</div>
<script>/* this is a way to config the autocomplete*/
   $( ".autocomplete" ).autocomplete({ appendTo: ".autoSuggestWrapper" });
</script> 

Answer 2

If you have multiple controls that use autocomplete, a reasonably elegant solution is to retrieve the widget attached to the control at the last moment and modify its CSS:

$(document).ready(function() {
    $("input#Foo").autocomplete({
        source: source
    });
    $("input#Bar").autocomplete({
        source: source,
        open: function(event, ui) {
            $(this).autocomplete("widget").css({
                "width": 400
            });
        }
    });
});

View Demo.

As mentioned above, the width of autocomplete list is calculated at the very last moment hence you must modify it in the open event.

Answer 3

I like @Martin Lögdberg answer but if you're using fixed sized widths rather than doing some fancy maths on the returned results to set the width, then you could also just set the width in CSS

ul .ui-autocomplete {
  width: 50%;
}

Answer 4

You can get "ui-menu" widget attached to the <input> having autocomplete with respect of $('#myinput').data("autocomplete").menu. So to change the width you can use

$('#myinput').autocomplete({
    source: yourUrlOrOtherSource,
    open: function () {
        $(this).data("autocomplete").menu.element.width(80);
    }
});

Answer 5

An improvement on Martin Lögdberg answer. This worked better for me because I had many textboxes on the page

$('.some-class').each(function(){
   var txt = $(this);
   txt.autocomplete({  
      source: mysource,  
      open: function() { 
          txt.autocomplete("widget").width(txt.outerWidth());
      }
   });  
});

Answer 6

I resolved this issue using the 'open' event available. I needed a way to dynamically set the width, along with other items and did not want extra markup.

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    open: function() { $('#div .ui-menu').width(300) }  
});