AJAX data in template of Select2-CodePudding

I am populating Select2 with AJAX data. My code is like below.

    function formatState(state) {
        if (!state.id) { return state.text; }
        var output = $('<span></span>');   // I would like get data `text[1]` of `processResults` here.
        return output;
    };

    //more code here

    cellEle.html(`<select multiple="multiple"></select>`);
    
    let selectEle = cellEle.children("select").select2({

        //more code here
        
        ajax: {

            //more code here

            processResults: function (data) {                
                var options = [];
                if (data) {
                    $.each(data, function (index, text) {
                        options.push({ id: index, text: text[0]});
                    });
                }
                return {
                    results: options,
                    more: false
                };
            },
        },
        templateSelection: formatState,
    });

I would like get AJAX data text[1] of processResults inside formatState() of templateSelection.

How can I get it ?

CodePudding user response：

You can pass any extra data via processResults. In your case it can be

var options = [];
if (data) {
  $.each(data.items, function (index, text) {
    options.push({ id: index, text: text[0], text2: text[1] /* <-- extra data */});
  });
}
return {
  results: options,
  more: false
};

Then access it in templateSelection

if (!state.id) {
  return state.text;
}
return $(`<span>${state.text} & ${state.text2}</span>`);

http://jsfiddle.net/moshfeu/3hrupdn1/22/