jQuery ui.combobox and asp.net web forms autopostback

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);

lsuarez · Accepted Answer · 2011-09-09 01:35:37Z

2

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.

edited Sep 9, 2011 at 1:35

answered Sep 8, 2011 at 1:50

lsuarez

4,9921 gold badge31 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

lloydphillips Over a year ago

I've added my combobox code to the question. I 'think' it's the same as the one in the jquery ui, not sure if we've made some slight modifications.

lsuarez Over a year ago

Actually it has to do with the fact that you have to find a way to bind this trigger to (I think) the blur event of the menu element of the autocomplete widget. I was doing some research into it last night but will look further later today. It's due to what I consider to be an incomplete event schema for the autocomplete widget. There is an event to intercept an element's selection and after the input has blurred to "confirm" a change but no event for after the input is updated with the text from the selected item.

lsuarez Over a year ago

I'm just as curious as you are because I'd love to use this to replace DDLs in my future ASP projects.

lsuarez Over a year ago

@lloydphillips I've edited my answer with revised code that seems to be correctly bubbling up the change event when appropriate.

Josh Schultz · Accepted Answer · 2011-09-08 01:18:45Z

0

For the change event:

$( ".selector" ).bind( "autocompletechange", function(event, ui) {
  // do postback
});

For select, use "autocompleteselect" instead of "autocompletechange".

answered Sep 8, 2011 at 1:18

Josh Schultz

8,1909 gold badges35 silver badges40 bronze badges

1 Comment

lloydphillips Over a year ago

I've added my combobox code to the question. I 'think' it's the same as the one in the jquery ui, not sure if we've made some slight modifications.

Collectives™ on Stack Overflow

jQuery ui.combobox and asp.net web forms autopostback

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related