Question

I have multiple jquery comboboxes on the same page and I want to the set the width (and other styles) of each differently. Modifying these jquery classes changes all of them, but I want to style individually. How to do that?

Here’s a working example

OR

you can just view the code below if you prefer.

CSS: (this changes all of them)

.ui-combobox-input
{
    margin: 0; /*original value*/
    padding: 0.3em; /*original value*/
    width: 90px; /*change the default autocomplete textbox width (too wide)*/
}
/*this is for the dropdown box*/
.ui-autocomplete
{
    max-height: 400px; /*limits dropdown list height*/
    overflow-y: auto;   /* prevent horizontal scrollbar */ /*limits dropdown list height*/
    overflow-x: hidden; /* add padding to account for vertical scrollbar */ /*limits dropdown list height*/
    z-index:1000 !important; /*limits dropdown list height*/
}

HTML

<div id="searchControlsBasic" runat="server" class="searchControlsBasic">
    <div id="minPrice">
        <select id="selMinPrice" class="selMinPrice" tabindex="3">
            <option value=“”>No Min</option>
            <option value=“50000”>50,000</option>
            <option value=“75000”>75,000</option>
        </select>
    </div>
   <div id="maxPrice">
        <select id="selMaxPrice" class="selMaxPrice" tabindex="4">
            <option value=“”>No Max</option>
            <option value=“50000”>50,000</option>
            <option value=“75000”>75,000</option>
        </select>
    </div>
   <div id="beds">
        <select id="selBeds" class="selBeds" tabindex="5">
            <option value=“0”>0+</option>
            <option value=“1”>1+</option>
            <option value=“2”>2+</option>
        </select>
    </div>
   <div id="baths">
        <select id="selBaths" class="selBaths" tabindex="6">
            <option value=“0”>0+</option>
            <option value=“1”>1+</option>
            <option value=“1.5”>1.5+</option>
        </select>
    </div>
</div>

Javascript: (pretty much the same as the combobox demo)

$(document).ready(function()
{
    $.widget("ui.combobox", {
        _create: function ()
        {
            var input,
                    self = this,
                    select = this.element.hide(),
                    selected = select.children(":selected"),
                    value = selected.val() ? selected.text() : "",
                    wrapper = this.wrapper = $("<span>")
                        .addClass("ui-combobox")
                        .insertAfter(select);

            input = $("<input>")
                    .appendTo(wrapper)
                    .val(value)
                    .addClass("ui-state-default ui-combobox-input")
                    .autocomplete({
                        delay: 0,
                        minLength: 0,
                        autoFocus: true,
                        source: function (request, response)
                        {
                            var requestTermNoCommas = request.term.replace(/,/g, "");
                            //var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); //original
                            var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(requestTermNoCommas), "i");
                            response(select.children("option").map(function ()
                            {
                                var text = $(this).text(); //original
                                var textNoCommas = $(this).text().replace(/,/g, "");
                                //if (this.value && (!request.term || matcher.test(text))) //original
                                if (this.value && (!request.term || matcher.test(textNoCommas)))
                                    return {
                                        //label: text.replace( //original
                                        label: textNoCommas.replace(
                                            new RegExp(
                                                "(?![^&;]+;)(?!<[^<>]*)(" +
                                                //$.ui.autocomplete.escapeRegex(request.term) + //original
                                                $.ui.autocomplete.escapeRegex(requestTermNoCommas) +
                                                ")(?![^<>]*>)(?![^&;]+;)", "i"
                                            ), "<strong>$1</strong>")
                                            // adds the thousands comma seperator after every third digit and takes into account the optional bold html markup
                                            .replace(/((<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?)(?=((<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?)+(?!(<strong>)?(<\/strong>)?\d(<strong>)?(<\/strong>)?))/g, "$1,"),
                                        value: text,
                                        option: this
                                    };
                            }));
                        },
                        select: function (event, ui)
                        {
                            ui.item.option.selected = true;
                            self._trigger("selected", event, {
                                item: ui.item.option
                            });
                        },
                        change: function (event, ui)
                        {
                            if (!ui.item)
                            {
                                var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                                    valid = false;
                                select.children("option").each(function ()
                                {
                                    if ($(this).text().match(matcher))
                                    {
                                        this.selected = valid = true;
                                        return false;
                                    }
                                });
                                // disabling this block since we want to leave custom values in combobox (that are conforming)
                                /*if (!valid)
                                {
                                    // remove invalid value, as it didn't match anything
                                    $(this).val("");
                                    select.val("");
                                    input.data("autocomplete").term = "";
                                    return false;
                                }*/
                            }
                        }
                    })
                    .addClass("ui-widget ui-widget-content ui-corner-left")
                    .focus(function() // for selecting text on focus 
                    {
                        // fixes a bug in chrome, firefox, and safari as well (opposed to just using $(this).select())
                        $(this).select().mouseup(function (e)
                        {
                            e.preventDefault();
                            $(this).unbind("mouseup");
                        });
                    });

            input.data("autocomplete")._renderItem = function (ul, item)
            {
                return $("<li></li>")
                        .data("item.autocomplete", item)
                        .append("<a>" + item.label + "</a>")
                        .appendTo(ul);
            };

            $("<a>")
                    .attr("tabIndex", -1)
                    .attr("title", "Show All Items")
                    .appendTo(wrapper)
                    .button({
                        icons: {
                            primary: "ui-icon-triangle-1-s"
                        },
                        text: false
                    })
                    .removeClass("ui-corner-all")
                    .addClass("ui-corner-right ui-combobox-toggle")
                    .click(function ()
                    {
                        // close if already visible
                        if (input.autocomplete("widget").is(":visible"))
                        {
                            input.autocomplete("close");
                            return;
                        }

                        // work around a bug (likely same cause as #5265)
                        $(this).blur();

                        // pass empty string as value to search for, displaying all results
                        input.autocomplete("search", "");
                        input.focus();
                    });
        },

        destroy: function ()
        {
            this.wrapper.remove();
            this.element.show();
            $.Widget.prototype.destroy.call(this);
        }
    });
});

$(document).ready(function()
{
    // setup min & max price, beds, and baths comboboxes
    $(".selMinPrice").combobox();
    $(".selMaxPrice").combobox();
    $(".selBeds").combobox();
    $(".selBaths").combobox();
    $("#toggle").click(function ()
    {
        $(".selMinPrice").toggle();
        $(".selMaxPrice").toggle();
        $(".selBeds").toggle();
        $(".selBaths").toggle();
    });
});

Answer 1

You can try

#minPrice .ui-combobox-input {
    width:400px;
}

#maxPrice .ui-combobox-input {
    width:300px;
}

#beds .ui-combobox-input {
    width:200px;
}

#baths .ui-combobox-input {
    width:100px;
}