title: Extending jQuery UI widgets - override parent events?
body: <p>I'm trying to extend the <a href="http://jqueryui.com/autocomplete/" rel="nofollow noreferrer">jQuery UI Autocomplete</a> widget.  In my custom widget, I need to be able to override the <a href="http://api.jqueryui.com/autocomplete/#event-select" rel="nofollow noreferrer">select</a> event, while ideally also allowing the user of the widget to attach their own handler to that event as well.</p>
  
  <p>Here's a jsfiddle of one of my attempts: <a href="http://jsfiddle.net/nN46R/" rel="nofollow noreferrer">http://jsfiddle.net/nN46R/</a></p>
  
  <p>My first attempt (which is in the jsfiddle) was to bind to the event in <code>_create</code>:</p>
  
  <pre><code>$.widget("custom.myautocomplete", $.ui.autocomplete, {
      _create: function() {
          this._super("_create");
  
          // Doesn't work
          this.element.bind('autocompleteselect', function() {
              alert('Handling autocompleteselect!');
          });
      }
  });
  </code></pre>
  
  <p>This didn't work. It <em>will</em> trigger if you change <code>autocompleteselect</code> to <code>select</code>, but only if you highlight any text within the textbox - but that's just jQuery's <a href="https://api.jquery.com/select/" rel="nofollow noreferrer">select</a> handler firing, not jQuery UI's <a href="http://api.jqueryui.com/autocomplete/#event-select" rel="nofollow noreferrer">autocompleteselect</a>. Not what I want.</p>
  
  <p>Per <a href="https://stackoverflow.com/questions/6992296/extending-jquery-ui-widget-how-to-access-parent-event">this post</a>, I tried defining a <code>_select</code> method within the widget:</p>
  
  <pre><code>$.widget("custom.myautocomplete", $.ui.autocomplete, {
      _create: function() {
          this._super("_create");
      },
      _select: function (event, ui) {
          alert('Handling select!');
      }
  });
  </code></pre>
  
  <p>That also didn't work. I tried the same with just <code>select</code> (no underscore), but no luck.</p>
  
  <p>The only thing that worked was to pass in a default handler using the <code>options</code> array, like so (<a href="http://jsfiddle.net/kB8L9/1/" rel="nofollow noreferrer">jsfiddle</a>):</p>
  
  <pre><code>$.widget("custom.myautocomplete", $.ui.autocomplete, {
      options: {
          select: function (event, ui) {
              alert('Handling select!');
          }
      }
  });
  </code></pre>
  
  <p>But this has a couple problems. First, it doesn't look like it's possible to call any other methods in the custom widget from within the handler:</p>
  
  <pre><code>$.widget("custom.myautocomplete", $.ui.autocomplete, {
      options: {
          select: function (event, ui) {
              alert('Handling select!');
  
              // Doesn't work:
              // Uncaught TypeError: Object #&lt;HTMLInputElement&gt; has no method '_myCustomSelectHandler'
              this._myCustomSelectHandler();
          }
      },
      _myCustomSelectHandler: function (event, ui) {
          alert('In _myCustomSelectHandler!');
      }
  });
  </code></pre>
  
  <p>Second, if the user defines their own <code>select</code> handler, then mine won't fire anymore:</p>
  
  <pre><code>$("#tags").myautocomplete({
      delay: 0,
      source: availableTags,
      select: function (e, ui) {
          alert("Muahaha! Me (the user) just overrode the select handler, and now yours won't get called!");
      }
  });
  </code></pre>
  
  <p>So that doesn't really look like a solution.</p>
  
  <p>So, is there any way I could extend the autocomplete widget and override the <code>select</code> handler?</p>