jQuery UI autocomplete refresh data

Question

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 autocomplete form but the entered data is not aviable until I refresh the page.

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

Answer 1

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.

Answer 2

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.