How to set search results to pre-selected in select2?

Question

Alright, so I'm trying to use select2's tagging and AJAX functionality in conjunction for my categories selection.

Currently, the user can search for categories to add to their post. One nice thing I noticed is that, select2 won't let you select the same selection twice (it's grayed and nothing happens when you click on it).

Here's my challenge... let's say a user is editing a post and already has categories selected. These categories appear below the select2 search. For example, let's say the user has the category "Life" selected. This will appear below already checked off.

The problem arises though, when the user searches for "Life". They'll be able to select it and add it again. I could just parse the previous selections and negate the selection, but I'd really like to use the built in functionality of select2 for the sake of consistency.

So how do I set incoming AJAX results to be already selected so that they can't be selected again?

Here's a fiddle. Notice how "Experiences" is grayed out when you search for it, but "life" is not even though it's already selected.

http://jsfiddle.net/odLnznct/1/

 function formatStuff(stuff) {
    if (stuff.loading) return 'Searching...';

    markup = "<p>" + stuff.text + "</p>";

    return markup;
}

function formatRepoSelection(stuff) {
    return stuff.cat_name || $('.js-select').val();
}

function catAdd() {
    var addCat = div = clo = label = labelText = null;

    cat = $('.js-select').select2('data');

    addCat = cat[0].text;

    div = $('#categories-cat_name div.checkbox:first');
    clo = div.clone();
    $('input[type="checkbox"]', clo).val(addCat);

    label = $('label', clo);
    labelText = label[0].childNodes[label[0].childNodes.length - 1];
    labelText.textContent = addCat;

    $(div).before(clo);
}


$('.js-select').select2({
    tags: true,
    ajax: {
        url: 'https://api.myjson.com/bins/58uwe',
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term
            };
        },
        processResults: function (data, page) {

            var select2Data = $.map(data, function (obj) {

                obj.id = obj.cat_id;
                obj.text = obj.cat_name;

                return obj;
            });

            return {
                results: select2Data
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) {
        return markup;
    },
    minimumInputLength: 1,
    templateResult: formatStuff,
    templateSelection: formatRepoSelection
});

$('.js-select').on('select2:select', function () {
    catAdd();
});

Answer 1

You can try this.

Since your results could be multiple, you need to set your select element's multiple true to enable it and just add selected option as default value.

You can do it either javascript or html.

<div id='select-test'>
    <select class="js-select" style="width:90%;" multiple=true>
        <option value="Life" selected=true>Life</option>
        <option value="Joy" selected=true>Joy</option>
    </select>
</div>