3

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'
        });
    }
});

Se ve algo como esto: introducir la descripción de la imagen aquí

2 respuestas 2

4

Basándome en esta respuesta de SOen que es muy similar a lo que tu tienes (esto funciona en Select2 4.0)

Puedes usar la función $.map() de javascript

processResults: function (data) {
  return {
    results: $.map(data, function(obj) {
      return { id: obj.id, text: obj.nombre };
    })
  };
}
3
  • Lo cambié a eso que escribiste y no muestra resultados. Pero gracias.
    – Maramal
    el 19 oct. 2016 a las 13:45
  • @Maramal con la respuesa de juan tienes algun error en la consola?
    – jasilva
    el 19 oct. 2016 a las 14:03
  • No, sólo obtengo un "dropdown" vacío. Sin errores.
    – Maramal
    el 19 oct. 2016 a las 14:05
0

El return de la función processResults debe ser en el mismo formato que los datos que recibe select2. Sería algo como esto:

<code>[{"id":9,"text":"Jose"},
 {"id":10,"text":"Juan"},
 {"id":11,"text":"Rodrigo"},
 {"id":12,"text":"Martin"},
 {"id":3,"text":"Pablo"},
 {"id":4,"text":"Eduardo"},
 {"id":5,"text":"Fernando"},
 {"id":13,"text":"Sebastian"}]
</code>

Tiene que tener id, y text. Otro requerimiento es que sin esto, no te funcionará. Es que en la return tienes que retornar pagination. Tomando tu codigo quedaría algo asi:

$('#agregar').click(function (e) {
    e.preventDefault();
    ...
    $(`#nombre_${id}`).select2({
        ajax: {
            url: '/api/nombres',
            processResults: function (data) {
                return {
                    // ¿qué va acá?
                    return { 
                      // Los datos formateados
                      results: [
                         {"id":9,"text":"Jose"},
                         {"id":10,"text":"Juan"},
                         {"id":11,"text":"Rodrigo"},
                         {"id":12,"text":"Martin"},
                         {"id":3,"text":"Pablo"},
                         {"id":4,"text":"Eduardo"},
                         {"id":5,"text":"Fernando"},
                         {"id":13,"text":"Sebastian"}
                      ],
                      pagination: {
                        // En caso de que no necesites paginar
                        more: false
                      }
                  };
              };
          }
      },
      language: 'es',
});

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.