Preselected AJAX source not displaying text

Is this a bug?
#1

When using AJAX to set a predefined option, the text does not show up. It sets the value correctly however. It sets the “title” to the desired text, not the span.

image
image1068×299 23.5 KB

Image showing no text in the span, but the “title” is showing the desired text.

Also, once the select2 has that predefined option set in it, you can search/select and choose another value successfully, however if you search and select the same value as the predefined option the text disappears once again.

My code is as follows:

var med = $('#select2AjaxMed');
    $.ajax({
        type: 'GET',
        url: '/Management/GetMedicine/' + id
    }).then(function (data) {
        var data2 = data.data;
        var option = new Option(data2.BrandName, data2.id, true, true);
        med.append(option).trigger('change');
        
        // manually trigger the `select2:select` event
        med.trigger({
            type: 'select2:select',
            params: {
                data: data2
            }
        });
    });
#2

Ok, i figured out the problem and will post my findings in case someone else runs into this problem. I had changed the “templateResult” to match my data format coming from the server. Apparently that’s what was causing the issue. I had changed “result.text” to “result.BrandName” to match my data (which worked perfectly fine for searching, but not for predefined options.) I changed it back to “result.text” and modified the data coming from the server to display “text” in place of BrandName and everything is working fine now. Also, the placeholder works now, as before it didn’t.

Here is my code before the change:

templateResult: function formatResult(result) {
                if (result.loading) return result.text;
                var markup = '<div class="clearfix"><div>' + result.BrandName + '</div>';
                if (result.GenericName) {
                    markup += '<div class="text-muted">' + result.GenericName + '</div>';
                }
                return markup;
            },
            templateSelection: function formatResultSelection(result) {
                return result.BrandName;
            }

Preselected option:

    var med = $('#select2AjaxMed');
    $.ajax({
        type: 'GET',
        url: '/Management/GetMedicine/' + id
    }).then(function (data) {
        var data2 = data.data[0];
        var option = new Option(data2.BrandName, data2.id, true, true);
        med.append(option).trigger('change');
        
        // manually trigger the `select2:select` event
        med.trigger({
            type: 'select2:select',
            params: {
                data: data2
            }
        });
    });

JSON:

{
    "data": [
        {
            "id": "6e5b1bc9-a5e6-4714-988d-1d8569a8c347",
            "BrandName": "Bupropion",
            "GenericName": "Bupropion Hydrochloride"
        }
    ]
}

Below is the working version:

            templateResult: function formatResult(result) {
                if (result.loading) return result.text;
                var markup = '<div class="clearfix"><div>' + result.text + '</div>';
                if (result.GenericName) {
                    markup += '<div class="text-muted">' + result.GenericName + '</div>';
                }
                return markup;
            },
            templateSelection: function formatResultSelection(result) {
                return result.text;
            }

Preselected option:

    var med = $('#select2AjaxMed');
    $.ajax({
        type: 'GET',
        url: '/Management/GetMedicine/' + id
    }).then(function (data) {
        var data2 = data.data[0];
        var option = new Option(data2.text, data2.id, true, true);
        med.append(option).trigger('change');
        
        // manually trigger the `select2:select` event
        med.trigger({
            type: 'select2:select',
            params: {
                data: data2
            }
        });
    });

JSON:

{
    "data": [
        {
            "id": "6e5b1bc9-a5e6-4714-988d-1d8569a8c347",
            "text": "Bupropion",
            "GenericName": "Bupropion Hydrochloride"
        }
    ]
}

Knowing this, I can now try to remap the data coming from the server (instead of changing the data the server sends) using the remapping function below.

var data = $.map(yourArrayData, function (obj) {
  obj.text = obj.text || obj.name; // replace name with the property used for the text

  return obj;
});