Estoy teniendo problemas al intentar llenar un dropdown (select) con select2 desde un recurso remoto:
Arreglé mi código backend para que la API devuelva el siguiente código JSON:
[
{"id":9,"nombre":"Jose"},
{"id":10,"nombre":"Juan"},
{"id":11,"nombre":"Rodrigo"},
{"id":12,"nombre":"Martin"},
{"id":3,"nombre":"Pablo"},
{"id":4,"nombre":"Eduardo"},
{"id":5,"nombre":"Fernando"},
{"id":13,"nombre":"Sebastian"}
]
Por otro lado, tengo campos que se agregan dinámicamente al presionar un botón "Agregar". Para rellenar cada select2 con los mismo resultados la mejor forma que encontré es:
$('#agregar').click(function (e) {
e.preventDefault();
...
$(`#nombre_${id}`).select2({
ajax: {
url: '/api/nombres',
processResults: function (data) {
return {
// ¿qué va acá?
};
}
},
language: 'es',
});
Por las dudas, hay unos ejemplos pero no son nada específicos: https://select2.github.io/examples.html
¿Cómo debería llamar a la API para que me muestre los resultados como <option value={id}>{nombre}</option>
en select2?
Muchas gracias.
Edición 1:
He probado éste ejemplo pero directamente no me carga el select2, sé que el uso de async: false
está obsoleto, pero sino no carga el dropdown. Así carga un dropdown vacío (se puede desplegar una lista pero no tiene nombre de las opciones ... ?):
$.ajax({
url: '/api/nombres',
method: 'GET',
async: false,
success: function (data) {
$(`#nombre_${id}`).select2({
data: data,
language: 'es'
});
}
});