Question

I’m using the autocombox from the jQuery UI library (http://jqueryui.com/demos/autocomplete/#combobox). The combobox is replacing a standard asp.net web forms dropdownlist control with it’s autopostback property set to true. Is there a way I can ‘inherit’ the event handler on this control or is there a way I can identify that a ‘select’ or ‘change’ event has happened in the combobox so I can fire off a postback myself?

EDIT:

Adding my combobox code:

    (function($) {
  $.widget("ui.combobox", {

    _create: function() {
      var self = this;
      var width = this.element.width() > 100 ? "style='width:"+this.element.width()+"px'" : "";
        self.select = this.element.hide();
      var v = self.select.children(":selected").text();
      self.span = $("<span>")
      .insertAfter(self.select)
      .addClass(self.select.attr("class"))
      .addClass("ui-combobox");
      self.input = $("<input "+width+">")
      .appendTo(self.span)
      .autocomplete({
        source: function(request, response) {
          var matcher = new RegExp(request.term, "i");
          response(self.select.children("option").map(function() {
            var text = $(this).text();
            if (!request.term || matcher.test(text))
            return {
              id: $(this).val(),
              label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" +
                      request.term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi,
                      "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
              value: text
            };
          }));
        },

        delay: 0,
        select: function(e, ui) {
          if (!ui.item) {
            // remove invalid value, as it didn't match anything
            $(this).val("");
            return false;
          }
          $(this).focus();
          self.select.val(ui.item.id);
          self._trigger("selected", null, {
            item: self.select.find("[value='" + ui.item.id + "']")
          });
        },
        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.value.match( matcher ) ) {
                this.selected = valid = true;
                return false;
              }
            });
            if ( !valid ) {
              // remove invalid value, as it didn't match anything
              $( this ).val( "" );
              select.val( "" );
              return false;
            }
          }
        },
        minLength: 0
      })
      .val(v)
      .addClass(self.select.attr("class"))
      .addClass("ui-widget-content ui-corner-left ui-combobox-input")
      .myHover();
      $("<div></div>")
      .appendTo(self.span)
      .button({
        icons: {
          primary: "ui-icon-triangle-1-s"
        },
        text: false
      }).removeClass("ui-corner-all")
      .addClass(self.select.attr("class"))
      .addClass("ui-corner-right ui-button-icon ui-combobox-button")
      .position({
        my: "left center",
        at: "right center",
        of: self.input,
        offset: "-1 0"
      })//.css("top", "")
      .click(function() {
        // close if already visible
        if (self.input.autocomplete("widget").is(":visible")) {
          self.input.autocomplete("close");
          return;
        }
        // pass empty string as value to search for, displaying all results
        self.input.autocomplete("search", "");
        self.input.focus();
        self.input.get(0).select();
      });
    },
    setValue: function(v) {
        this.select.val(v);
        this.input.val(this.select.children(":selected").text());
    }
    //_trigger("change", e, ui);
  });
})(jQuery);

Answer 1

In the _create function of the combobox widget definition, you’ll notice that var select refers to the select element being targeted. We need to fire a change event on that element in two places in the combobox code. The first is when a menu item is selected and populated in the text field. This will require some testing on the close event of the autocomplete widget. The second is on the change event for the widget (for manual text entry) and this one is a good deal simpler.

First, edit the options sent to the autocomplete constructor in the ui.combobox _create function around line 48 to add a close handler option after the change handler option:

change: function(event, ui) {
    if (!ui.item) {

    }
},
close: function(event, ui) {
    if (event.originalEvent &&
        event.originalEvent.type == "menuselected") {
        $(select).change();
    }
}

Notice that each time the menu closes, if it is the result of a menuselected event (i.e. the user chose an option), it will fire the original select’s change event. By this time the item is populated in the text box and also flagged selected back in the source element.

Next, modify the test and set function for the select in the change handler above (at or around line 36) to include a call to the select’s change when a successful test is performed and the value is set:

select.children("option").each(function() {
    if ($(this).text().match(matcher)) {
        this.selected = valid = true;
        $(select).change();
        return false;
    }
});

This is necessary because programmatically flagging the option as selected will not generate the required change event.

I have created a working demo with a change event bound to the source select that alerts the new value of the element when it is updated. I believe that ASP’s auto-postback handler also listens for this same event so I suspect this should generate the behavior you are looking for.