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:

$($('.ui-autocomplete')[0]).width(150);
$($('.ui-autocomplete')[1]).width(105);
$($('.ui-autocomplete')[2]).width(80);

Which isn't really a solution since the user is able to trigger various autocompletes in different orders, and this code just styles them based on the order they are added to the DOM.

When autocomplete is triggered, it seems to create a <ul> and then position it under the input box that triggered it. Unfortunately, I can't find any unique identifiers in this generated <ul> to latch on to and apply some CSS.

My issue is different from this one, since I'm using just the default autocomplete, and not the autocomplete-combobox.

Also, digging into the autocomplete <ul> and matching different autocomplete box widths with the values inside the list doesn't work either, since the values are dynamically generated.

Any ideas?

Answer 1

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

Answer 2

I like luqui's answer. But if you are in a situation where you cannot use the appendTo feature (could be due to overflow hidden etc.), you can use the code below to make sure that you are making changes to the correct list.

$('#input').autocomplete({  
    source: mysource,  
    open: function() { 
        $('#input').autocomplete("widget").width(300) 
    }  
});

Ref: http://docs.jquery.com/UI/Autocomplete#method-widget

Answer 3

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

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 6

Without using extra Javascript code, you can use 1 simple CSS line:

<style type="text/css">
    .ui-menu,.ui-menu>.ui-menu-item,.ui-menu-item>a {min-width:800px !important}
</style>

So why does this work with min-width?

Simply because width gets overwritten by the JS, sometimes even with solutions that use open: function(event, ui) { ... } (like rkever's answer, which did not work in my case). However, min-width is not overwritten, so it comes in handy.

Also, if you do not want to use !important, you can further detail the rule with the remaining classes:

.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all,.ui-menu>.ui-menu-item,.ui-menu-item>a
 {min-width:800px}

This avoided me further JS hacks, hope it helps!

Answer 7

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 8

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 9

Reading API, I've just add a class ui-front to the parent's div of my input, and that works fine.

<div class="ui-front">
    <label for="autosample" class="required">example</label>
    <input name="autosample" class="default-autocomplete" type="text">
</div>

See here :

[...] the parents of the input field will be checked for a class of ui-front. If an element with the ui-front class is found, the menu will be appended to that element. Regardless of the value, if no element is found, the menu will be appended to the body.

The appended element determine the position and width of the menu.

Answer 10

As of jQuery UI 1.10, the autocomplete widget was rewritten using the widget factory. As part of that, the autocomplete now contains a _resizeMenu extension point, which is called when sizing the menu before displaying.

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    _resizeMenu: function() {
        this.menu.element.outerWidth( 500 );
    }
});

Answer 11

I managed to solve this with CSS by adding float to the autocomplete menu.

.ui-autocomplete { float: left; }

Since the autocomplete menu is positioned absolute and a direct child of the <body>. I guess it gets it's max width from the body, and since it's position absolute it can't be displayed as inline-block to avoid taking all the available space.

Also .ui-autocomplete { width: 1%; } seems to work.