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 them to have different widths for each one.

i can change the width for ALL of them by adding this css:

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

but i can't figure out a way to change the width on just one of them

Answer 1

Simply use the JQuery CSS Method:

css("width","300px");

http://api.jquery.com/css/#css2

You can append this after adding your combobox.

How do you use the combobox in your code?

Answer 2

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 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 it's "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".

Answer 3

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.

Answer 4

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

in _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 5

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

Answer 6

DEMO: preview | code

ok, assuming you have all your code for Autocomplete etc.. then you have also:

 $(function() {
    // after you call the combobox!
    $("select").combobox();

    //Use this for create personal select style..
    //loop trought each select and add your style
    $(".ui-widget select").each(function (e) {
    $(this).next('input').addClass('my_personal_style_'+ e );
    });

  });


<div class="ui-widget"> 
  <label>Your preferred programming language: </label> 
  <select></select> <br />

<label>Your preferred programming language: </label> 
  <select></select> <br />

<label>Your preferred programming language: </label> 
  <select></select> <br />
</div>

now you have that each select have it's own class

.my_personal_style_1 { width: 200px }
.my_personal_style_2 { width: 300px  } 
.my_personal_style_3 { width: 400px  }

and so on