Jquery select2ajax：定义formatResult、formatSelection和initSelection角色和行为

我在我的网站上实现了一个基本的select2 ajax元素：

$(function(){
    $('#appbundle_marketplace_product_ingredient_barcode').select2({
        minimumInputLength: 10,
        multiple: false,
        allowClear: true,
        quietMillis: 50,
        placeholder: 'Commencez à taper le code barre ici',
        ajax: {
            data: function (term) {
                return {
                    q: term // search term
                };
            },
            url: function(term) {
                url="http://fr.openfoodfacts.org/api/v0/produit/" + term +".json";
                return url;
            },
            dataType: 'json',
            results: function(data) {
                if (data.status!=1) {return;}
                if (data.product.complete!=1) {return;}
                return {results: [{
                    text: data.code + " - " + data.product.product_name,
                    slug: data.code,
                    id: data.code
                }]};
            },
        }
    });
});

我期待在模板方法formatResult、formatSelection和InitSelection的帮助下更好地显示。 我已经阅读了网上的文档（不完全理解）和示例

虽然我能理解每种方法应该做什么，但我无法使它们正常工作

• json响应是否有一个必需的格式（在我的示例中，我只得到一个对象，而我只能通过将其转换为一个对象数组上的对象来使其工作？$！！？ 示例url：

对于formatResult、formatSelection和InitSelection：

• 属性的格式（数组/对象/哪些键？）是/应该是什么
• 答复的格式是/应该是什么
• select 2如何调用它们以及如何处理它们的响应

---

如果有人能帮助我理解这种行为，我将不胜感激。

好吧，我理解得更好了，更多的研究帮助我找到了如何使这种行为起作用的方法

以下是我的代码，以防有人需要： 基本上，json响应必须是一个对象数组，其中至少包含一个id和一个文本键。如果不是，则需要处理接收到的数据，使其与此格式匹配，或者返回select2可以处理的内容

        $(function(){
            $('#appbundle_marketplace_product_ingredient_barcode').select2({
                minimumInputLength: 5,
                closeOnSelect: false,
                multiple: false,
                allowClear: true,
                quietMillis: 250,
                placeholder: 'Commencez à taper le code barre ici',
                ajax: {
                    data: function (term) {
                        return {
                            q: term // search term
                        };
                    },
                    url: function(term) {
                        url="http://fr.openfoodfacts.org/api/v0/produit/" + term +".json";
                        return url;
                    },
                    dataType: 'json',
                    results: function(data) {
                        if (data.status!=1) {return;}
                        if (data.product.complete!=1) {return;}

//                        return {results : [data]};
                        return {
                            results: $.map([data], function (item) {
                                return {
                                    text: item.product.product_name,
                                    id: item.code,
                                    data: item
                                }
                            })
                        };
                    }
                },
                formatResult : function(response)
                {
                    data=response.data;
                    console.log(data);
                    this.description =
                        '<div id="fmu_select2_ajax_result">' +
                            "<div>Nom du produit : " + data.product.product_name + "</div>" +
                            "<div>"+
                                "<img src='"+data.product.image_small_url+"'>"+
                                "<ul>" +
                                    "<li><span>Catégories</span> : " + data.product.categories + "</li>" +
                                    "<li><span>Quantité</span> : " + data.product.quantity + " - " + data.product.serving_quantity + "</li>" +
                                "</ul>" +
                                "<div>" + data.product.brands + "</div>" +
                        "</div>" +
                        '</div>'
                    ;
                    return this.description;
                },
                formatSelection: function(response)
                {
                    data=response.data;
                    return data.code + " - " + data.product.product_name;
                },
                escapeMarkup: function (m) { return m; },
                dropdownCssClass: "bigdrop"
            });

$（函数（）{
$（“#appbundle_marketplace_product_Component_barcode”）。选择2({
最小输入长度：5，
closeOnSelect:false，
多重：假，
allowClear:是的，
安静百万：250，
占位符：“开始使用代码barre ici”，
阿贾克斯：{
数据：功能（术语）{
返回{
q：术语//搜索术语
};
},
url:函数（术语）{
url=”http://fr.openfoodfacts.org/api/v0/produit/“+term+”.json”；
返回url；
},
数据类型：“json”，
结果：功能（数据）{
如果（data.status！=1）{return；}
if（data.product.complete！=1）{return；}
//返回{results:[data]}；
返回{
结果：$.map（[数据]，函数（项）{
返回{
文本：item.product.product\u名称，
id:item.code，
数据：项目
}
})
};
}
},
formatResult：函数（响应）
{
data=response.data；
控制台日志（数据）；
这是我的描述=
'' +
产品名称：“+data.product.product_name+”+
""+
""+
“
”+
“
类别：“+data.product.categories+”
”+
“
数量：”+data.product.quantity+“-“+data.product.service\u quantity+”
”+
“
”+
“”+data.product.brands+“”+
"" +
''
;
返回此.description；
},
格式选择：函数（响应）
{
data=response.data；
返回data.code+“-”+data.product.product\u名称；
},
转义标记：函数（m）{return m；}，
dropdownCssClass：“大滴”
});

你们中的一些人使用Select2 4.x，把头撞在桌子上，问自己做错了什么：

formatResult和formatSelection已重命名

重命名模板选项 Select2以前提供了多个选项，用于格式化结果列表和所选选项，通常称为“格式化程序”，使用formatSelection和formatResult选项。作为“格式化程序”也被用于本地化，这也发生了变化，它们被重命名为templateSelection和templateResult，它们的签名也发生了变化

从以前版本的Select2迁移时，应参考有关模板的更新文档