Я пытаюсь настроить поле автозаполнения JQery UI для получения данных из ajax-соединения. Вот мой код до сих пор:

            $("#mainIngredientAutoComplete").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "../api/IngredientChoices",
                        dataType: "json",
                        success: function (data) {
                            response(function (item) {
                                return {
                                    label: item.MainName,
                                    value: item.MainItemID
                                }
                            });
                        }
                    });
                }
            });

Это мой JSON:

[{"SubItemID":1,"MainItemID":1,"SubName":"2%","MainName":"Milk"},{"SubItemID":2,"MainItemID":1,"SubName":"Skim/Fat Free","MainName":"Milk"},{"SubItemID":3,"MainItemID":2,"SubName":"Chedder","MainName":"Cheese"}]

HTML:

                
                    Ingredient
                    Measurement
                    Amount
                    
                    
                

Когда я начну печататьмил» (для молока) мой код дает мне эту ошибку:

РЕДАКТИРОВАТЬ:

Я сделал ваше изменение, которое сработало за несколько попыток, но теперь я получаю новую ошибку -

Необработанное исключение в строке 55, столбец 25 в [URL]

0x800a1391 - Ошибка времени выполнения Microsoft JScript: 'данные' не определено

        $("#mainIngredientAutoComplete").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "../api/IngredientChoices",
                    dataType: "json",
                    response: ($.map(data, function(v,i){
                        return {
                            label: v.MainName,
                            value: v.MainItemID

                        }}))
                });
            }
        });