Select2: Preselected item and correct rendering through templateSelection

Question

When using Select2 v4, the suggested (actually the right) way to set a selected value programmatically, is to manipulate the underlying select element, add the desired <option> elements you want, set the value with $selectElement.val(<value>) and trigger a .trigger('change') event so that select2 plugin will update itself from the underlying select element. You can see this here.

The problem with this is when you have defined a templateSelection, that returns not just text for the selected value, but a whole HTML DOM (for instance, you may apply styling, add images, icons etc etc and return that as the rendered selection).

templateSelection accepts input as it comes from either an array datasource, or an ajax datasource etc. Each item represents one option but it may have more than just and id and a text. templateSelection may take into account many of the item's properties to produce the rendered output.

You can only define value and text in an <option> element. You cannot define the actual object (item) you want to set as selected, so that the templateSelection may produce the right output.

Is there a way to achieve that using only select2's API?

If not, is there any other workaround to have the value selected from code rendered correctly through templateSelection?

Answer 1

Just in case someone like me comes across this, the Select2 v4 manual provides an answer for this: https://select2.org/programmatic-control/add-select-clear-items#preselecting-options-in-an-remotely-sourced-ajax-select2

The following snippet is from the documentation. Essentially, you get the initial value via an ajax call, and set the initial value programmatically via the select2:select event.

// Set up the Select2 control
$('#mySelect2').select2({
    ajax: {
        url: '/api/students'
    }
});

// Fetch the preselected item, and add to the control
var studentSelect = $('#mySelect2');
$.ajax({
    type: 'GET',
    url: '/api/students/s/' + studentId
}).then(function (data) {
    // create the option and append to Select2
    var option = new Option(data.full_name, data.id, true, true);
    studentSelect.append(option).trigger('change');

    // manually trigger the `select2:select` event
    studentSelect.trigger({
        type: 'select2:select',
        params: {
            data: data
        }
    });
});

However, if you're using the templateSelection option, and are returning a jQuery object to provide a fancy one line formatted selection result, this solution will not work. In fact, triggering select2:select appears to do nothing.

Using jQuery, I found I could attach the data to the option, and from the templateSelection function, use this data as a fall back.

// create the option and append to Select2
var option = new Option(data.full_name, data.id, true, true);
$(option).data('raw', data);
studentSelect.append(option).trigger('change')

And in the templateSelection function:

templateSelection: function (result) {
    if (!result.id || result.loading) {
        return result.text
    }
    var $container = $(
        '<div class="clearfix">' +
            '<div class="pull-left select2-result__name"></div>' +
            '<div class="pull-right select2-result__finding_name"></div>' +
        '</div>'
    );

    var raw = $(result.element).data('raw')
    $container.find('.select2-result__name').text(result.name || raw.name || result.text)
    $container.find('.select2-result__finding_name').text(result.finding_name_1 || raw.finding_name_1)

    return $container
}

This example uses multiple fallbacks. We always try using what came in the results, as is provided in the normal ajax calls, but we fall back to the raw data from the initial option, and if that is lacking, fall back to the text field.