jQuery UI autocomplete refresh data

I use jQuery ui autocomplete feature.

var colors;

$(document).ready(function(){
        loadColors();
        $('#empf').autocomplete(colors);
}

function loadColors(){
 colors = new Array(getNumColor());
//in a loop save the colors to array using colors[i] = ...
}

function addColor(){
    ...
    color[n] = color;
}

When the user enters new color it is saved to the color array. I switch to the autocompl开发者_StackOverflow中文版ete form but the entered data is not aviable until I refresh the page.

Any ideas how to make the new color avialable for autocomplete?

When you update the color, you need to also update the source that autocomplete uses, like this:

function addColor() {
    //add colors
    $('#empf').autocomplete("option", { source: colors });
}

Here's a sample demo doing this, adding a color and updating the autocomplete source once a second.

I've tried Nick Craver's solution, which looks completely logical. Maybe, it is because I am using a URL string rather than an array as the 'source'. Unfortunately his solution does not do a live refresh for the ajax data returned. In order to refresh an ajax data source, I found that the following works:

element.autocomplete("option","source",url);
element.autocomplete("search");

I think the 'search' method is required for string or ajax URL source types.