CODEWITHSUNDEEP
javascriptjquery-uiwidgetoverriding
safara
safara

Reputation: 45

Using the $.widget factory to override jQuery UI Autocomplete options

I decided to write a custom widget that extends and overrides the standard Autocomplete widget.

The official documentation for the $.widget factory mentions inheritance, but it doesn't look like it's possibile to override the original widget options (i.e. not just add to them).

For example, I wasn't able to redefine the source option (that defaults to null) with this code:

$.widget("ui.productSearch", $.ui.autocomplete, {
    bla: 15,
    source: function( request, response ) {
       response($.ui.autocomplete
                .filter(["a", "b", "c"],request.term));
    },
    minLength: 2        
});

I tried out the above code on JS Bin. If you inspect the resulting widget you can see that bla is added to the options, but both source and minLength still reflect the default values defined in $.ui.autocomplete. source is still null, and thus an error is raised: this.source is not a function.

What am I doing wrong? And if this is the expected behavior of $.widget, what is the best way to override an option?

Upvotes: 2

Views: 2994

Answers (1)

Paul
Paul

Reputation: 2157

Well, looks to me like you're just defining a function 'source' in the new widget; that's fine, but you haven't overridden the option. What if you tried

$.widget("ui.productSearch", $.ui.autocomplete, {
    options: {
        bla: 15,
        source: function( request, response ) {
           response($.ui.autocomplete
                .filter(["a", "b", "c"],request.term));
        },
        minLength: 2
    }
});

?

Upvotes: 6

Related Questions