Is it possible to set the width of a jQuery autocomplete combobox?

Question

I am using this jQuery UI combobox autocomplete control out of the box off the jQuery UI website:

My issue is that I have multiple comboboxes on a page, and I want t

Answer 1

It works for me using:

$.extend($.ui.autocomplete.prototype.options, {
  open: function(event, ui) {
    $(this).autocomplete("widget").css({
            "width": ($(this).outerWidth() + "px")
        });
    }
});

Thanks Michael Simons https://info.michael-simons.eu/2013/05/02/how-to-fix-jquery-uis-autocomplete-width/

Answer 2

Set the max width instead of width, because width is override by plugin any time..

.ui-autocomplete-input
{ 
    max-width: 300px;/* you can set by percentage too */
}

Answer 3

Note that I use the code in http://jqueryui.com/demos/autocomplete/#combobox.

In the _create method, add this line:

    _create: function() {
        var self = this;
        var eleCSS = this.element[0].className; //This line

Then scrolldown a little, find this:

    .addClass("ui-widget ui-widget-content ui-corner-left");

And change this to:

    .addClass("ui-widget ui-widget-content ui-corner-left "+ eleCSS);

HTML

<select class="combo-1 autocomplete">
    <option value="a">asp</option>
    <option value="c">c</option>
    <option value="cpp">c++</option>
    <option value="cf">coldfusion</option>
    <option value="g">groovy</option>
    <option value="h">haskell</option>
    <option value="j">java</option>
</select>

Now you can apply CSS to combo-1:

<script>
    $(function() {
        $('.autocomplete').combobox();
        $('.combo-1').css('width', '50px');
    });
</script>

Answer 4

I think the easiest way to do it is to capture the open event and then set the width there:

$("#autocompleteInput").bind("autocompleteopen", function(event, ui) {
  var width = 300;
  $(".ui-autocomplete.ui-menu").width(300);
});

Since only one autocomplete menu can be active at one time, it's okay to just change the width for the menu class.

Answer 5

$.widget( "custom.myAutoComplete", $.ui.autocomplete, {
    options: {
        resultClass: "leanSolutions",
    },

    _create: function()
    {
        this._super();
    },`

    _renderMenu: function(ul, items)
    {
        var that = this;
        ul.addClass(that.options.resultClass);

        $.each( items, function( index, item ) {
            that._renderItemData( ul, item );
        });
    }
});

Now You Can do this:

$('.myAutoCompleteBox').myAutoComplete(
 data: ...
 etc: ...
 resultClass: 'myAutoCompleteBoxResultList'
);

And then you can style it

.myAutoCompleteBoxResultList{   
    width: 8000px;
}

Answer 6

You could always set an actual CSS rule in your document to match the class,

.ui-autocomplete-input
{ 
    width: 300px;
}

if you know in advance how wide it has to be.