Select2: Why does a preselected OPTION tag show only a cross, without the text?

Question

I'm making a SELECT like this:

<select class="select form-control js-example-basic-multiple" multiple="multiple" id="id_tags" name="tags">
    {% for tag in photo.tags.all %}
    <option selected value="http://localhost:8001/api/tags/{{ tag.id }}/">{{ tag.name }}</option>
    {% endfor %} 
</select>

I then fire up my select2 instance:

$(".js-example-basic-multiple").select2({
    multiple : true,
    ajax : { ..... }
});

And I see this:

AJAX is definitely working though, and new items can be added:

Also the Select2 instance has the right data even for the items that only have a cross:

IN >>> $(".js-example-basic-multiple").val()
OUT >>> ["http://localhost:8001/api/tags/4142/", "http://localhost:8001/api/tags/4145/", "http://localhost:8001/api/tags/4160/", "http://localhost:8001/api/tags/4213/", "http://localhost:8001/api/tags/4344/", "http://localhost:8001/api/tags/6602/"]

Answer 1

In case it helps someone else, this is what I had to do to fix this:

function make_select2() {
    $(".js-example-basic-multiple").select2({
        multiple : true,
        id : function(repo) {
            //console.log("repo");
            //console.log(repo);
            return repo.url;
        },
        ajax : {
            url : "/api/tags/",
            dataType : 'json',
            delay : 100,
            placeholder : "Tag your photos",
            data : function(params) {
                //console.log("params");
                //console.log(params);
                return {
                    q : params.term, // search term
                    page : params.page
                };
            },
            processResults : function(data, params) {
                // parse the results into the format expected by Select2.
                // since we are using custom formatting functions we do not need to
                // alter the remote JSON data
                //console.log("data");
                //console.log(data);
                //console.log("params");
                //console.log(params);
                var select2Data = $.map(data.results, function(obj) {
                    obj.id = obj.url;
                    obj.text = obj.name;
                    return obj;
                });
                return {
                    results : select2Data,
                    pagination : {
                        more : data.next
                    }
                };
            },
            cache : true,

        },
        escapeMarkup : function(markup) {
            return markup;
        },
        minimumInputLength : 1,
        templateResult : formatRepo, // omitted for brevity, see the source of this page
        // templateSelection : formatRepoSelection // omitted for brevity, see the source of this page
    });
}

This is my code - all I had to do was comment out the templateSelection - which it turns out wasn't necessary anyway.