Default selected option in select2 multiple select with remote data

I am trying to add the default selected option to multiple select2 with remote data. But the title is set instead of the option text. This is my code:

Html

<select class="form-control select_medicines" id="select_medicines" name="medicines[]" multiple="multiple">
    @foreach($medicines as $medicine)
        <option value="" selected="selected"></option>
    @endforeach
</select>

Js

$(document).ready(function() {
$(".select_medicines").select2({
    ajax: {
        url: 'url',
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                search: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data, params) {
            params.page = params.page || 1;

            return {
                results: $.map(data.data, function(obj) {
                    return {
                        id: obj.id,
                        fa_name: obj.fa_name,
                        en_name: obj.en_name,
                        is_for_diabetes: obj.is_for_diabetes
                    };
                }),
                pagination: {
                    more: (params.page * 15) < data.total_count
                }
            };
        },
        cache: true
    },
    placeholder: 'search',
    width: '100%',
    minimumInputLength: 3,
    escapeMarkup: function(markup) {
        return markup;
    },
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
});

function formatRepo (repo) {
    if (repo.loading) {
        return repo.text;
    }

    var markup = "<div class='select2-result-repository clearfix'>" +
        "<div class='select2-result-repository__meta'>" ;

    markup += "<div class='mt-0 mb-2 text-dark'>";

    if (repo.is_for_diabetes === "1"){
        markup+= "<i class='mdi mdi-star mr-1'></i>";
    }

    markup += repo.fa_name + "(" + repo.en_name + ")";
    markup += "</div>";

    markup += "</div></div>";
    return markup;
}

function formatRepoSelection (repo) {
    return repo.fa_name || repo.en_name;
}
});

and this is the result:

the title is set but text is empty. I try to add value like {id: 12, text: metformin} to select but it didn't work.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW