set data attributes with ajax and select2

Question

I'm trying setup data attributes into select2 options but without success, at this moment i have the following JS code

_properties.$localElement.select2({
    ajax: {
        url: "url",
        type: "POST",
        dataType: 'json',
        delay: 250,
        data: function (params) {
        return {
            name: params.term, // search term
            type: 1
        };
        },
        processResults: function (data) {

            return {
            results: $.map(data, function (item) {
                return {
                    text: item.name,
                    source: item.source,
                    id: item.id
                }
                })
            };
        },
        cache: true
    },
    //define min input length
    minimumInputLength: 3,

});

And i want setup a data-source for the selected option value.

Exemplification

So what's your question? What problems are you having? – Macintyre

Nothing in the above attempts to set (o get) any data-* attributes. – Toddy

I've tried define the options template with resultTemplate options and set a data attribute on that input but even after selected the correct option, the option dont have the custom attribute setted. – Exemplification

Please provide some more info, then we can help. – Vainglory

I don't understand the downvote for this question, I think OP has clearly defined on what he tried to achieve and what he expects. This helped me in my situation, Thanks Rubem. +1 – Prepossess

Answer 1

I find the solution, looks that resultTemplate dont format the "visual" selected option , need to use templateSelection option:

    templateSelection: function(container) {
        $(container.element).attr("data-source", container.source);
        return container.text;
    }

Exemplification

Answer 2

I solved this problem.

$('select').on('select2:select', function (e) {
    var data = e.params.data;
    $("select option[value=" + data.id + "]").data('source', data.source);
    $("select").trigger('change');
});

Cranio

Answer 3

You can actually use the exact syntax, that you already used. The "source-attribute" just needs to be accessed via data().data.source of the specific select2-option.

So keep your processResults function like you did:

processResults: function (data) {
   return {
      results: $.map(data, function (item) {
         return {
            text: item.name,
            source: item.source,
            id: item.id
         }
      })
   };
},

and if you want to retrieve the source of the selected option, you can do it like this:

var selectedSelect2OptionSource = $("#idOfTheSelect2 :selected").data().data.source;

In fact you can set any variable you want in your processResults function and then select it via data().data.variableName!

Pylon

i love you so much – Okra

Here is how to do it in a more correct way : https://mcmap.net/q/557235/-adding-quot-data-quot-attributes-with-select2 – Okra