CSS - How to reference another Combobox?

Question

CSS - How to reference another Combobox?

Navigation

#1 by (0 votes)

2

Dear, I have 2 cascading autocomplete combobox for State and City. When I change the size in CSS, it changes the size of the 2 combobox and I need to change only 1. I use the JQuery-UI sample code and the following CSS:

.custom-combobox-input {
  margin: 0;
  padding: 5px 10px;
  width: 186px;
  height: 24px;
  border: thin #1E56A0 solid;
  padding-left: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

HTML:

<div id="cmbestado">
  <select id="selestado" name="selestado" ></select>
</div>

<div id="cmbcidade">
  <select id="selcidade" name="selcidade" ></select>
</div>

I do not understand much of CSS, how to refer to the second combo?

I think you can better understand the following example I used as a base: link

jquery css

asked by anonymous 12.12.2017 / 16:32

1 answer

Add photos and gallery to an ASP MVC product google Custom Search Engine

score 0 · Answer 1

The combobox is created by jQuery asynchronously. In this case, you can change the width of any of them after the function that creates them ends.

You can do this by including a line in jQuery:

$(".custom-combobox-input:eq(1)").css("width","400px");

Where :eq(1) is the second combobox (the first would be :eq(0) ).

Add the code in the location indicated below by the arrow:

$(function () {
    $("#one").append($('<option selected></option>').val('1').html('1'));

    $("#one").append($('<option></option>').val('2').html('2'));

    $("#one").combobox({
        select: function (event, ui) {
            updateTwo($(this).val());
        }
    });

    // added- update one box value and refresh ui -BD
    $("#two").combobox();
    $("#one").val("1").combobox("refresh");
    updateTwo($("#one").val());

   $(".custom-combobox-input:eq(1)").css("width","400px"); // ←
});

See it working:

(function ($) {
    $.widget("custom.combobox", {
        _create: function () {
            this.wrapper = $("<span>")
                .addClass("custom-combobox")
                .insertAfter(this.element);

            this.element.hide();
            this._createAutocomplete();
            this._createShowAllButton();
        },

        _createAutocomplete: function () {
            var selected = this.element.children(":selected"),
                value = selected.val() ? selected.text() : "";

            this.input = $("<input>")
                .appendTo(this.wrapper)
                .val(value)
                .attr("title", "")
                .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
                .autocomplete({
                delay: 0,
                minLength: 0,
                source: $.proxy(this, "_source")
            })
                .tooltip({
                tooltipClass: "ui-state-highlight"
            });

            this._on(this.input, {
                autocompleteselect: function (event, ui) {
                    ui.item.option.selected = true;
                    this._trigger("select", event, {
                        item: ui.item.option
                    });
                },

                autocompletechange: "_removeIfInvalid"
            });
        },

        _createShowAllButton: function () {
            var input = this.input,
                wasOpen = false;

            $("<a>")
                .attr("tabIndex", -1)
                .attr("title", "Show All Items")
                .tooltip()
                .appendTo(this.wrapper)
                .button({
                icons: {
                    primary: "ui-icon-triangle-1-s"
                },
                text: false
            })
                .removeClass("ui-corner-all")
                .addClass("custom-combobox-toggle ui-corner-right")
                .mousedown(function () {
                wasOpen = input.autocomplete("widget").is(":visible");
            })
                .click(function () {
                input.focus();

                // Close if already visible
                if (wasOpen) {
                    return;
                }

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

        _source: function (request, response) {
            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
            response(this.element.children("option").map(function () {
                var text = $(this).text();
                if (this.value && (!request.term || matcher.test(text))) return {
                    label: text,
                    value: text,
                    option: this
                };
            }));
        },

        _removeIfInvalid: function (event, ui) {

            // Selected an item, nothing to do
            if (ui.item) {
                return;
            }

            // Search for a match (case-insensitive)
            var value = this.input.val(),
                valueLowerCase = value.toLowerCase(),
                valid = false;
            this.element.children("option").each(function () {
                if ($(this).text().toLowerCase() === valueLowerCase) {
                    this.selected = valid = true;
                    return false;
                }
            });

            // Found a match, nothing to do
            if (valid) {
                return;
            }

            // Remove invalid value
            this.input.val("")
                .attr("title", value + " didn't match any item")
                .tooltip("open");
            this.element.val("");
            this._delay(function () {
                this.input.tooltip("close").attr("title", "");
            }, 2500);
            this.input.autocomplete("instance").term = "";
        },
        // added- inserted refresh function -BD
        refresh: function () {
            selected = this.element.children(":selected");
            this.input.val(selected.text());
        },
        _destroy: function () {
            this.wrapper.remove();
            this.element.show();
        }
    });
})(jQuery);

$(function () {
    $("#one").append($('<option selected></option>').val('1').html('1'));

    $("#one").append($('<option></option>').val('2').html('2'));

    $("#one").combobox({
        select: function (event, ui) {
            updateTwo($(this).val());
        }
    });

    // added- update one box value and refresh ui -BD
    $("#two").combobox();
    $("#one").val("1").combobox("refresh");
    updateTwo($("#one").val());

   $(".custom-combobox-input:eq(1)").css("width","400px");
});

function updateTwo(arg1) {
    $("#two").empty();

    if (arg1 == "1") {
        $("#two").append($('<option selected></option>').val('1.1').html('1.1'));

        $("#two").append($('<option></option>').val('1.2').html('1.2'));
    } else if (arg1 == "2") {
        $("#two").append($('<option selected></option>').val('2.1').html('2.1'));

        $("#two").append($('<option></option>').val('2.2').html('2.2'));
    }

    // added- update second box value and refresh ui -BD
    $("#two").val("").combobox("refresh");

}

.custom-combobox {
    position: relative;
    display: inline-block;
}
.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
}
.custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><divclass="ui-widget">
    <select id="one"></select>
    <br/>
    <select id="two"></select>
</div>