CODEWITHSUNDEEP
javascriptjqueryjquery-uicombobox
Manny Sran
Manny Sran

Reputation: 173

Reset AutoComplete Combobox

Hi there I have two ComboBox's. The child combobox changes the dropdownlist values depending on what was selected in the parent combobox.

Here Is the Parent ComboBox:

Here Is the Parent ComboBox

And if we clicked test for example we would see this:

Child ComboBox

If we selected Building, then decided we wanted to change the product type to Battery Cooling we come across an issue:

enter image description here

It will keep Building Selected even though it is clearly not in the list of items to select:

I want to be able to change the value back to a blank character like it is when it first loads (as you can see in Example 2)

Here is my JavaScript:

<script type="text/javascript">


    $(document).ready(function () {
        document.getElementById("hiddenFieldsProcess").style.display = "none";

        document.getElementById("hiddenFieldsSubProcess").style.display = "none";

        $("#Products").combobox();
        $("#Process").combobox();
        $("#SubProcess").combobox();



    });

    $('#Products').on("combochange", function () {
        var selectedProduct = $(this).val();

        if (selectedProduct >= 0) {


            document.getElementById("hiddenFieldsProcess").style.display = "block";
            document.getElementById("hiddenFieldsSubProcess").style.display = "none";
            $.getJSON('@Url.Action("Process")', { product: selectedProduct }, function (products) {
                var processSelect = $('#Process');
                processSelect.empty();
                processSelect.append($('<option/>', {
                    value: 0,
                    text: ""
                }));
                $.each(products, function (index, process) {
                    processSelect.append($('<option/>', {
                        value: process.value,
                        text: process.text
                    }));
                });
            });
        }
        else {
            document.getElementById("hiddenFieldsProcess").style.display = "none";
            document.getElementById("hiddenFieldsSubProcess").style.display = "none";

            var monthsSelect = $('#Process');
            monthsSelect.empty();
            monthsSelect.append($('<option/>', {
                value: 0,
                text: ""
            }));

        }

    });

Upvotes: 0

Views: 413

Answers (1)

poomcyber
poomcyber

Reputation: 151

I modify this part and it works for me. Once you add the "id" into the element that created for the autocomplete, you can control it like a general element.

.attr( "id",$(this.element.get(0)).attr('id') +'-combobox' )

this.input = $( "<input>" )
      .appendTo( this.wrapper )
      .val( value )
      .attr( "title", "" )
      .attr( "id",$(this.element.get(0)).attr('id') +'-combobox' )
      .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )

Upvotes: 1

Related Questions