使用 JSON 数据的 Ajax / Jquery 自动完成

Posted 2023-05-08

【中文标题】使用 JSON 数据的 Ajax / Jquery 自动完成

【英文标题】：Ajax / Jquery Autocomplete with JSON data

【发布时间】：2013-01-07 17:33:03

【问题描述】：

我正在尝试设置我的 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 运行时错误：“数据”未定义

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

                        ))
                );
            
        );

【参考方案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
                               ;
                    
                ));
            
        );
    
);

【讨论】：

+1：您也可以使用$.map，而不是自己将项目推送到新数组中。

实际上，下拉菜单会出现，但它不会自动过滤结果。我给我奶酪。知道为什么吗？

因为我没有添加过滤条件

啊，完美！非常感谢！

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