When extending a jQuery UI widget, how to extend more than one function?

Question

I'm currently extending the jQuery UI widget as follows:

$.widget( "custom.autocompleteCategorized", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
        var self = this,
            currentCategory = "";
        $.each( items, function( index, item ) {
            if ( item.category != currentCategory ) {
                ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                currentCategory = item.category;
            }
            self._renderItem( ul, item );
        });
    }    
});

This works fine, but I would now like to extend another function like so:

$.widget( "custom.autocompleteCategorized", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
        var self = this,
            currentCategory = "";
        $.each( items, function( index, item ) {
            if ( item.category != currentCategory ) {
                ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                currentCategory = item.category;
            }
            self._renderItem( ul, item );
        });
    }

    _response: function(contents){
        $.ui.autocomplete.prototype._response.apply(this, arguments);
        $(this.element).trigger("autocompletesearchcomplete", [contents]);
    }

});

Unfortunately this errors, what is the right way to extend multiple functions as seen above?

Thanks

Thanks I tried that but then I get a "Uncaught TypeError: undefined is not a function" after entering input in the autocompleter — AnApprentice
– AnApprentice, Commented Aug 21, 2012 at 0:42
Well, that's how you do it, though, more or less. Maybe something else is wrong. — Dave Newton
– Dave Newton, Commented Aug 21, 2012 at 0:47

Mark Pieszak - Trilon.io · Accepted Answer · 2012-08-21 01:02:49Z

2

missing comma i think

$.widget( "custom.autocompleteCategorized", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
        var self = this,
            currentCategory = "";
        $.each( items, function( index, item ) {
            if ( item.category != currentCategory ) {
                ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                currentCategory = item.category;
            }
            self._renderItem( ul, item );
        });

    }, // <--- you're missing this comma

    _response: function(contents){
        $.ui.autocomplete.prototype._response.apply(this, arguments);
        $(this.element).trigger("autocompletesearchcomplete", [contents]);
    }

});

edited Aug 21, 2012 at 1:02

Mark Pieszak - Trilon.io

68.3k15 gold badges84 silver badges96 bronze badges

answered Aug 21, 2012 at 0:42

Eva

5,1174 gold badges23 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

When extending a jQuery UI widget, how to extend more than one function?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related