Sébastien Sébastien - 5 months ago 160
jQuery Question

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

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.



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

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