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

JavaScript

var $myinput = $('#myinput').autocomplete({source: ['ABC', 'BCD', 'CDE']})
$myinput.data('autocomplete').menu.element.addClass('myautocomplete');

CSS

.myautocomplete{width:300px!important;}

You can't set the width directly, because it will get overwritten. But you can set the min-width directly.

var $myinput = $('#myinput').autocomplete({source: ['ABC', 'BCD', 'CDE']})
$myinput.data('autocomplete').menu.element.css('min-width', '300px');

I use the following which is basicly one of the readily available widget init functions and might be what you are looking for too. I added just two simple lines to achieve it

$(function(){
$.widget( "ui.combobox", {
    _create: function() {
        var self = this,
        select = this.element.hide(),
        selected = select.children( ":selected" ),
        value = selected.val() ? selected.text() : "";
        var getwid = this.element.width(); // <<<<<<<<<<<< HERE
        var input = this.input = blah blah
        .insertAfter( select )
        .val( value )
        .autocomplete({
            delay: 0,
            minLength: 0,
            source: function( request, response ) {
                blah blah
            },
            blah blah
        })
        //?? .addClass( "ui-widget ui-widget-content ui-corner-left" );
        input.width(getwid); // <<<<<<<<<<<< AND HERE
        input.data( "autocomplete" )._renderItem = function( ul, item ) {
            blah blah

Note the lines var getwid etc and input.width(getwid);

This I worked out to copy the width of the select objects and apply it to the combo boxes as they (the autocomplete comboboxes) are created to overlay the select inputs.

Hope that helps. Regards.

PS: I believe that if you really just want to apply fixed widths not referencing the underlying select list then ignore the first line I added and change the second to compare a predefined array with the "this" id.

A simple

$('.ui-autocomplete-input').css('width','300px')

works (I tried it on the linked page with Firebug) to change the first one on the page.

You can do something like:

$($('.ui-autocomplete-input')[N]).css('width','300px') #N is the nth box on the page

To change the Nth one.

To find a specific one by a characteristic, you could do it in many ways.

Find it by the first "option" (in this example "asp"):

$('.ui-autocomplete-input').map(function(){if ($(this).parent().children()[1].options[0].text == 'asp'){ $(this).css('width','300px'); return false;} })

Find it by its "label":

$('.ui-autocomplete-input').map(function(){if ($($(this).parent().children()[0]).text() == "Your preferred programming language: "){ $(this).css('width','300px'); return false;}})

etc...

I'll update if you have an idea of how you want to find your combobox.

EDIT FOR COMMENT

oo, that makes it even easier. From the example source you linked to, the HTML is already wrapped in a div:

<div class="ui-widget" id="uniqueID">
    <label>Your preferred programming language: </label>
    <select>
        <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>
        <option value="js">javascript</option>
        <option value="p1">perl</option>
        <option value="p2">php</option>
        <option value="p3">python</option>
        <option value="r">ruby</option>
        <option value="s">scala</option>
    </select>
</div>

I would give that div a unique id then:

$('#uniqueID > input.ui-autocomplete-input').css('width', '300px')

That selects child elements of your div that are inputs with a class of "ui-autocomplete-input".

Don't bother with JavaScript. You can easily do this in CSS as you were originally trying to do. All you need to do is add a unique selector to each one. For example:

HTML would look like this

<div class="title">
    <label for="title">Title: </label>
    <input id="title">
</div>
<div class="tags">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>

CSS would look like this

.ui-autocomplete-input
{ 
    width: 120px;
}
.title .ui-autocomplete-input
{ 
    width: 200px;
}
.tags .ui-autocomplete-input
{ 
    width: 600px;
}