Autocomplete and ajax

I load a string array using $.getJSON to use it as values in a jquery ui autocomplete. I can't get it to work.

Code (the success function is being called properly and I see the alert):

$(function () {
    $.getJSON(baseUri + 'truck/models/', {}, function (data) {
        $("#ModelName").autocomplete({ 
            开发者_Python百科    source: function( request, response ) {
                    alert(data);
                    response(data);
        }
        });
    });
});

Content returned by the server:

["KIRUNA K350","MAFI","SISU TR180","SISU TRX242","SVETRUCK 32T","VOLVO A25D","VOLVO A25E","VOLVO A40","VOLVO BMl120","VOLVO BML90"]

Error that I get when I type in the input box:

Uncaught TypeError: Cannot read property 'element' of undefined

It looks like you are just doing the ajax fetch for the autocomplete options on page load so no need to use a function for the source you can just do:

$(function () {
    $.getJSON(baseUri + 'truck/models/', {}, function (data) {
        $("#ModelName").autocomplete({ 
                source: data
        });
    });
});

You must ensure you set the object value

Thus

({source: data});

see fiddle for example: http://jsfiddle.net/dDCEW/

I had another plugin which defined menu in the jQuery context. I removed that plugin and everything works fine know. Kind of nasty, huh?