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

Posted 2023-05-07

【中文标题】select2 ajax：定义 formatResult、formatSelection 和 initSelection 角色和行为

【英文标题】：select2 ajax: define formatResult, formatSelection and initSelection roles and behaviour

【发布时间】：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 如何调用它们以及如何处理它们的响应？

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

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