Ajax / Jquery Autocomplete with JSON data

Question

I am trying to setup my Jquery UI autocomplete field to have data from an ajax connection. Here is my code so far:

            $(\"#mainIngredientAutoComplet         


        

Answer 1

You need to change the success callback to

response($.map(data, function(v,i){
    return {
                label: v.MainName,
                value: v.MainItemID
               };
}));

Fiddle.

The jQuery.map helps to Translate all items in an array or object to new array of items.

Update: Add Filter

$("#mainIngredientAutoComplete").autocomplete({
    source: function (request, response) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
        $.ajax({
            url: "../api/IngredientChoices",
            dataType: "json",
            success: function (data) {
                response($.map(data, function(v,i){
                    var text = v.MainName;
                    if ( text && ( !request.term || matcher.test(text) ) ) {
                        return {
                                label: v.MainName,
                                value: v.MainItemID
                               };
                    }
                }));
            }
        });
    }
});