select2 ajax：定义 formatResult、formatSelection 和 initSelection 角色和行为答案

【问题标题】：select2 ajax: define formatResult, formatSelection and initSelection roles and behaviourselect2 ajax：定义 formatResult、formatSelection 和 initSelection 角色和行为
【发布时间】：2015-01-13 01:26:47
【问题描述】：

我在我的网站上实现了一个基本的 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 响应是否有必需的格式（在我的示例中，我得到一个对象，我只能通过将其转换为对象数组上的对象来使其工作？$ !!？示例网址：http://fr.openfoodfacts.org/api/v0/produit/3029330003533.json

关于formatResult、formatSelection和InitSelection：

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

任何帮助理解这种行为将不胜感激！

【问题讨论】：

标签： jquery ajax json jquery-select2

【解决方案1】：

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

formatResult 和 formatSelection 已重命名。

https://select2.github.io/announcements-4.0.html

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

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

【讨论】：

【解决方案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"
            });

【讨论】：