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

Question

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?

Paul · Accepted Answer · 2011-04-05 13:54:47Z

6

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

?

answered Apr 5, 2011 at 13:54

Paul

2,15716 silver badges13 bronze badges

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

2 Comments

safara Over a year ago

I had completely missed that... Thank you!

RubyRedGrapefruit Over a year ago

That documentation is impenetrable. Plenty of docs on how to write the widget, NO documentation on how to instantiate it with custom values. For instance, I have a combobox widget where I want to pass it specific values so that I can set up a JSON source. But NOWHERE can I see how to call the blasted thing with a value.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related