Ajax / Jquery自动完成与JSON数据

Question

我正在尝试设置我的Jquery 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：

<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>

当我开始输入“mil”（代表牛奶）时，我的代码出现了这个错误：

编辑:
我进行了你的更改，它在几次尝试中起作用，但现在我遇到了新的错误 -
在[URL]的第55行第25列未处理的异常
0x800a1391 - Microsoft JScript 运行时错误：'data' 未定义。

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

                        }}))
                });
            }
        });

- Yecats

Answer 1

你需要将成功回调函数更改为

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

Fiddle。

jQuery.map 可以将数组或对象中的所有项转换为新的项数组。

更新：添加过滤器。

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

- Arun P Johny

---

你也可以使用 $.map 来代替手动将项目推入新数组。 - Andrew Whitaker

实际上，下拉菜单出现了，但它没有自动过滤结果。Mi给我奶酪。有什么想法为什么？ - Yecats

因为我还没有添加筛选条件。 - Arun P Johny

@Yecats 我更倾向于将 request.term 数据发送到服务器并在那里进行过滤，否则我们可能会传输大量未使用的数据从而影响响应时间。 - Arun P Johny

请记得在成功回调函数中解析JSON字符串。使用$.parseJSON对该字符串进行解析，并映射该数组。 - Karlth

我使用了上述方法来提取数据并返回它们，虽然响应中有正确的数据，但是显示了“没有搜索结果”的文本，请问还有其他原因导致这种情况发生吗？ - Suneth Kalhara