select2 ajax: define formatResult, formatSelection and initSelection roles and behaviour

Question

I have implemented a basic select2 ajax element on my site:

$(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
                }]};
            },
        }
    });
});

I am looking forward to better the display with the help of templating methods formatResult, formatSelection and InitSelection. I have read the documentation (which don't totally understand) and examples on the net.

Although i can understand what each method is supposed to do, I am unable to make them work properly.

• Is there a required format of the json response (in my example I get one single object and I could only make it work by transforming it into an object made on an array of objects ?$!!? example url: http://fr.openfoodfacts.org/api/v0/produit/3029330003533.json

As for formatResult, formatSelection and InitSelection:

• What is/should be the format (array/object/which keys?) of their attributes?
• What is/should be the format of the response?
• How are they called by select 2 and how is their response treated?

Any help as to understand this behaviour would be much appreciated!

Answer 1

Those of you using Select2 4.x , and banging your head against the desk and asking yourselves what is that you are doing wrong :

formatResult and formatSelection has been renamed.

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

Renamed templating options Select2 previously provided multiple options for formatting the results list and selected options, commonly referred to as "formatters", using the formatSelection and formatResult options. As the "formatters" were also used for things such as localization, which has also changed, they have been renamed to templateSelection and templateResult and their signatures have changed as well.

You should refer to the updated documentation on templates when migrating from previous versions of Select2.

Answer 2

Well, I understood better and some more reseach helped me figure how to make this work.

Below is my code in case someone needs : Basically, the json response has to be an array of objects which at least contain an id and a text key. If not, you need to manipulate the received data to make it match this format or return something that select2 can handle.

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