CSS - How to reference another Combobox?

Asked

Viewed 120 times

2

Guys, I got two autocomplete combobox cascading for State and City. When I change the size in CSS, I change the size of the 2 combobox and I need to change only 1. I use the example code of Jquery-UI 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 don’t know much about CSS, how to refer to the second combo?

I think you can better understand the following example I used as a base: https://jsfiddle.net/mindlessbaby/zbjk1ss1/70/

jquery css

  • About the "combobox" it is actually better to call it select or else dropdown which is a select jQuery custom. Because the select is the element responsible for acting this way in HTML. Another thing is that apparently your html is incomplete because you reference the class .custom-combobox-input but does not use in your html code provided here in your question. Provide a larger fraction of the code so you can get answers.

  • However, a way of referencing the second select, would be through this selector (based on your question html): select[name=selcidade] { } or else by id: #cmbcidade { }

  • Using the example code of Jquery-UI is actually used an INPUT field (where values can be entered and which is fetched in JSON) and Jquery lists as if it were a select. I think you can better understand in the following example where I used/

  • That way you presented in the fiddle, I believe that using .custom-combobox-input:nth-child(1) for the state combo and .custom-combobox-input:nth-child(2) for the city combo would be an option.

1 answer

0

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

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 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>
<link rel="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>

<div class="ui-widget">
    <select id="one"></select>
    <br/>
    <select id="two"></select>
</div>

  • Beauty, good answer and I agree that it works, but you really need to use jQuery? if he knows the Qtde. of combos that will be created and the order of each one would not be necessary.

  • @Pauloroberto By CSS I could not. I think the CSS of jquery UI does not let change. As there are only two fields, I find it much simpler to just add a line and the tah problem solved.

  • tried to use with Important? input.custom-combobox-input:nth-child(2){ width: 400px !important; } It’s likely to work, unless there’s another Important assigned in the width from them by the own jQuery UI, then would have to see a way to specify even more the selector, because the more specific the CSS selector is, the priority is higher, so at a specific level, will overwrite the jQuery UI. I am commenting because I am unable to test, the proxy here blocks some sources and I get problems in certain Fiddles.

  • @Pauloroberto I already tested with ! Important, with Nth-Child, I tried to insert a dynamic CSS after 5 seconds, nothing worked.

  • Perfect. Thank you @? Thank you to everyone. Abs

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.