Question

我在我的网站上实现了一个基本的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：

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

非常感谢任何帮助以了解这种行为！

Answer 1

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

formatResult和formatSelection已重命名。

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

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

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

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

select2 ajax：定义formatResult，formatSelection和initSelection角色和行为

2 个答案: