jQuery UI Autocomplete - setting source after _create/_init not working?

Question

According to the jQuery UI, you should set the autocomplete source after create/init as follows:

$( ".selector" ).autocomplete( "option", "source", ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] );

Here is some of the code (based off of the combobox example):

     $("#item").combobox();
     $("#item").autocomplete("option", "source", function (request, response) {
         $.ajax({
             type: "POST",
             url: "itmsrch.ashx",
             dataType: "json",
             data: {
                 dept: $("#dept").val,
                 term: request.term
             },
             success: function (data) {
                 response($.map(data, function (item) {
                     return {
                         label: item.name,
                         value: item.name
                     }
                 }));
             }
         });
     });

After typing the required 2 characters to kick off the autocomplete action, I am getting an error that the source is not set. Any ideas?

Andrew Whitaker · Accepted Answer · 2011-01-27 17:36:06Z

The reason this won't work is that the combobox sample actually creates an input and applies the autocomplete widget to it and not the select that you called combobox() on:

/* Snip */
var input = this.input = $( "<input>" )
    .insertAfter( select )
    .val( value )
    .autocomplete({ ... });
/* Snip */

In order to modify the source of combobox's internal autocomplete, you could write:

$("#combobox").next("input").autocomplete("option", "source", ["Foo", "Bar"]);

Or, more generally, you could add the following to the plugin:

_setOption: function(key, value) {
    this.input.data("autocomplete")._setOption(key, value);
}

And then modify autocomplete options using:

$("#item").combobox("option", "source", ["Foo", "Bar"]);

I'd recommend this method.

However, this will cause issues because the combobox code's event handler for the autocomplete's select expects that the selected item has an option property (check out the source code). Additionally, this will break any event handlers you have on the select (e.g. change).

If you don't care about updating the underlying select (which I bet you don't since you're changing the datasource), you can remove the select event handler entirely.

I have a working example here that uses the last method and seems to work okay.

Collectives™ on Stack Overflow

jQuery UI Autocomplete - setting source after _create/_init not working?

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