我想设置我的jQuery用户界面自动完成字段从阿贾克斯连接有数据。这是我的code到目前为止：

  $（＃mainIngredientAutoComplete）。自动完成（{
                来源：功能（请求，响应）{
                    $阿贾克斯（{
                        网址：../api/IngredientChoices
                        数据类型：JSON，
                        成功：功能（数据）{
                            响应（函数（项目）{
                                返回 {
                                    标签：item.MainName，
                                    值：item.MainItemID
                                }
                            }）;
                        }
                    }）;
                }
            }）;
 

这是我的JSON：

HTML：

 ＆LT;表ID =tbl_ingredients的风格=填充：0px;＆GT;
                ＆所述; TR的id =ingHeader＆GT;
                    ＆LT; TD＆GT;成份＆LT; / TD＆GT;
                    ＆LT; TD＆GT;测量与LT; / TD＆GT;
                    ＆LT; TD＆GT;度＆lt; / TD＆GT;
                    ＆LT; TD＆GT;＆LT;输入ID =mainIngredientAutoComplete/＆GT;＆LT; / TD＆GT;
                    ＆LT; TD＆GT;＆LT; / TD＆GT;
                ＆LT; / TR＆GT;
＆LT; /表＆gt;
 

当我开始我的code给我这个错误输入万（牛奶）：

编辑：

我做你的变化，这工作了一些尝试，但现在我得到一个新的错误 -

未处理的异常，在第55行，列25 [URL]

0x800a1391 - 微软JScript运行时错误：数据未定义

  $（＃mainIngredientAutoComplete）。自动完成（{
            来源：功能（请求，响应）{
                $阿贾克斯（{
                    网址：../api/IngredientChoices
                    数据类型：JSON，
                    回应：（$ .MAP（数据，函数（V，I）{
                        返回 {
                            标签：v.MainName，
                            值：v.MainItemID

                        }}））
                }）;
            }
        }）;
 

解决方案

您需要成功回调改为

 响应（$。图（数据，函数（V，I）{
    返回 {
                标签：v.MainName，
                值：v.MainItemID
               };
}））;
 

小提琴。

借助 jQuery.map 有助于翻译在数组或对象，以项目新的数组中的所有项目。

更新：添加过滤器

  $（＃mainIngredientAutoComplete）。自动完成（{
    来源：功能（请求，响应）{
        VAR匹配=新的RegExp（$ .ui.autocomplete.escapeRegex（request.term），I）;
        $阿贾克斯（{
            网址：../api/IngredientChoices
            数据类型：JSON，
            成功：功能（数据）{
                回应（$。图（数据，函数（V，I）{
                    VAR文本= v.MainName;
                    如果（文本和放大器;及（request.term || matcher.test（文本））！）{
                        返回 {
                                标签：v.MainName，
                                值：v.MainItemID
                               };
                    }
                }））;
            }
        }）;
    }
}）;
 

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

            $("#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
                                }
                            });
                        }
                    });
                }
            });

This is my 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:

<table id="tbl_ingredients" style="padding:0px;">
                <tr id="ingHeader">
                    <td>Ingredient</td>
                    <td>Measurement</td>
                    <td>Amount</td>
                    <td><input id="mainIngredientAutoComplete" /></td>
                    <td></td>
                </tr>
</table>

When I start to type "mil" (for milk) my code gives me this error:

EDIT:

I made your change, which worked for a few attempts but now I am getting a new error -

Unhandled exception at line 55, column 25 in [URL]

0x800a1391 - Microsoft JScript runtime error: 'data' is undefined

        $("#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

                        }}))
                });
            }
        });

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
                               };
                    }
                }));
            }
        });
    }
});