Default (pre-selected) values using AJAX and templating

[timroberson]

I am using an AJAX data source and a custom selection template. My custom selection template makes use of additional data returned by the remote data source (not just "id" and "text"). When I pre-select a value using the example from the documentation my additional data is "undefined".

The following example shows the issue using Select2 4.0.6-rc.0:

https://jsbin.com/deluyabija/edit?html,js,output

I expect the pre-selected option to be "My Other Option (More Custom Data)" but it is "My Other Option (undefined)".

I read #5210 and this message board post which deal with the same problem but neither includes a clear resolution. I feel like #5210 reads more like a support question rather than a bug report, so I am opening a new issue. I have not seen a statement that this is deliberately not supported, so I consider it a bug.

Please let me know if this is a bug or if what I'm looking to do is not supported by design. Thank you!

[timroberson]

I'm not sure if this is a bug anymore because I found an easy solution. I’m using the sample code from the documentation as a starting point but, before I append the new option, I set my extra fields as custom data attributes.

// 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);

    // SET CUSTOM DATA
    option.dataset.myCustomValue = 'Something';
    option.dataset.myOtherCustomValue = 'Something Else';
    // END SET CUSTOM DATA

    studentSelect.append(option).trigger('change');

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

Then in my template functions, if my extra data doesn’t exist, I pull it from the element’s custom data attributes.

function myTemplateFunction(data) {
    if (! data.id) {
        return data.text;
    }

    var myCustomValue = data.myCustomValue || data.element.dataset.myCustomValue;
    var myOtherCustomValue = data.myOtherCustomValue || data.element.dataset.myOtherCustomValue;

    // More...
}