Quiero mostrar opciones pre-seleccionadas, pero al hacerlo en cuanto carga el select2 no me muestra el texto en los tags que se inician.
Si alguien pudiera decirme que tengo mal en mi código o como funciona el usar trigger('change') exactamente!
El texto lo obtengo de mi ajax como json, cuando yo lo selecciono manualmente me funciona bien, pero al inicializarlos por defecto no me muestra el texto. Llevo semanas intentando resolverlo, ¿Alguien?
var idsResponsables = "",
x = "",
res = "";
if (document.getElementById('responsables') !== null) {
idsResponsables = document.getElementById('responsables').value;
x = idsResponsables.split(",");
var options = "";
for (var i = 1; i < x.length - 1; i++) {
options += "<option value='" + x[i] + "'>Texto Cualquiera</option>";
}
document.getElementById("destinatarios").innerHTML = options;
}
var datos = [];
var _tags = $("#select option").each(function() {
datos.push($(this).val());
});
var $tagsControl = $("#select").select2({
tags: true,
ajax: {
url: "ajaxSearchUsers.jsp",
dataType: 'json',
quietMillis: 250,
data: function(params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function(data, params) {
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function(markup) {
return markup;
},
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
$tagsControl.val(datos).trigger("change");
Estos son mis métodos de formatRepo y formatRepoSelection
function formatRepo(repo) {
if (repo.loading)
return repo.text;
var markup = "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'><i class='fa fa-user'></i> " + repo.name + "</div>";
if (repo.email) {
markup += "<div class='select2-result-repository__description'><i class='fa fa-envelope'></i> " + repo.email + "</div>";
}
markup += "" +
"</div></div>";
return markup;
}
function formatRepoSelection(repo) {
return repo.name;
}
Manualmente todo me funciona bien, solo me da error cuando los quiero inicializar, me muestra los tags de la siguiente manera: