Question

I have converted a few DropDownLists to jQuery comboboxes to add auto complete functionality etc. however, there are various methods in the codebehind file to disable the drop down lists.

This does not disable the jQuery combobox so the value can still be changed.

Is there a way to bind the combobox to the dropdown list enable / disabled event? so they can update automatically based on the source drop down list?

Answer 1

Ok, I think I have come up with a solution by editing the js file for creating the combo box – you may recognise most of the script to turn in to a combo box. I have highlighted the added lines with ** ** at the beginning and end (I was trying to make it bold)

(function ($) {
    $.widget("ui.combobox", {
        _create: function () {
            var self = this,
                     select = this.element.hide(),
                     selected = select.children(":selected"),
                     value = selected.val() ? selected.text() : "";
            **var disabled = select.is(':disabled');**
            var dropDownListID = this.element.context.id;
            var input = this.input = $("<input>")
                     .insertAfter(select)
                     .val(value)
                     .autocomplete({
                         delay: 0,
                         minLength: 0,
                         source: function (request, response) {
                             var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                             response(select.children("option").map(function () {
                                 var text = $(this).text();
                                 if (this.value && (!request.term || matcher.test(text)))
                                     return {
                                         label: text.replace(
                                             new RegExp(
                                                 "(?![^&;]+;)(?!<[^<>]*)(" +
                                                 $.ui.autocomplete.escapeRegex(request.term) +
                                                 ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                             ), "<strong>$1</strong>"),
                                         value: text,
                                         option: this
                                     };
                             }));
                         },
                         select: function (event, ui) {
                             ui.item.option.selected = true;
                             self._trigger("selected", event, {
                                 item: ui.item.option
                             }
                             );
                             __doPostBack(dropDownListID, '');
                         },
                         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;
                                     }
                                 });
                                 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")
                     **.attr('disabled', disabled)**
                     .click(function () { $(this).select(); });

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

            this.button = $("<button type='button' style='width:25px; height:25px;' >&nbsp;</button>")
                     .attr("tabIndex", -1)
                     .attr("title", "Show All Items")
                     **.attr('disabled', disabled)**
                     .insertAfter(input)
                     .button({
                         icons: {
                             primary: "ui-icon-triangle-1-s"
                         },
                         text: false
                     })
                     .removeClass("ui-corner-all")
                     .addClass("ui-corner-right ui-button-icon")
                     .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.input.remove();
            this.button.remove();
            this.element.show();
            $.Widget.prototype.destroy.call(this);
        }
    });
})(jQuery);