使用ajax select2预定义的呈现项目

Question

I can easily retrieve and format AJAX data to work with Select2, like this

function formatItem (item) {
    if (!item.id) {
        return item.text;
    }
    var _item = '<span class="' + item.deleted +'"><i class="fa fa-user"></i> ' + item.doctor + ', <small>' + item.sex + ' (' + item.user + ')</small></span>';
    return $(_item);
}

var tabSelect = $('#t');
tabSelect.select2({
    ajax: {
        url: '../ajax/results.php',
        data: function (params) {
            return {
                search: params.term,
                page: params.page || 1
            };
        }
    },
    templateResult: formatItem,
    templateSelection: formatItem
});

So far so good: <select> items are rendered correctly as HTML, with the nice Font-Awesome icon and the <small> tag.

User now selects an item and submits the (search) form. Of course I'd like to mark the current item as selected , and here comes the trouble.

Select2 docs have a way to predefine an AJAX retrieved item , but this works for simple text and not for rendered items with all the HTML bells and whistles

So, when adapting the provided example:

$.ajax({
    type: 'GET',
    url: '../ajax/results-selected.php', // url to retrieve a single item
    data: {
        iData: [here goes the ID for retrieving single item]
    }
}).then(function (data) {
    // create the option and append to Select2
    var item = data.results[0];
    console.log(item);
    var option = new Option(item, item.id, true, true);
    tabSelect.append(option).trigger('change');

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

I get the HTML rendered item, but with a series of undefined (please notice that console.log(item) returns the expected result: in other words, I have the fields but have no idea how to render them)

I tried lot of things, but none of them work, ie:

var option = new Option(formatItem(item), item.id, true, true);

I read around but could not find a valid solution working: please, any help?

Answer 1

I managed it to work by returning the whole HTML snippet in the JSON response (as text item)

// the JSON response
{
    "results": [
        {
            "id": "1234",
            "text": "<span class=\"\"><i class=\"fa fa-user\"></i> Doe John, <small>Mr. (Site Owner)</small></span>"
         }
    ]
}


// the updated snippet
$.ajax({
    type: 'GET',
    url: '../ajax/results-selected.php', // url to retrieve a single item
    data: {
        iData: [here goes the ID for retrieving single item]
    }
}).then(function (data) {
    // create the option and append to Select2
    var item = data.results[0];
    console.log(item);
    var option = new Option(item.text, item.id, true, true);
    tabSelect.append(option).trigger('change');

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