Dropdown с select2 и jQuery ajax

У меня есть проблемы, попробовав наполнять dropdown (select) с select2 с удаленного ресурса:

Я упорядочил мой код backend для того, чтобы API возвратила следующий код 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"}
]

С другой стороны, у меня есть поля, которые присоединяются dinámicamente, нажав на кнопку "Agregar". Чтобы наполнять каждый select2 с самим оказанные лучшую форму, которую я нашел, он:

$('#agregar').click(function (e) {
    e.preventDefault();
    ...
    $(`#nombre_${id}`).select2({
        ajax: {
            url: '/api/nombres',
            processResults: function (data) {
                return {
                    // ¿qué va acá?
                };
            }
        },
        language: 'es',
    });

Из-за сомнений, есть примеры, но они являются совсем не специфическими: https://select2.github.io/examples.html

Как он был бы должен называть API для того, чтобы он показал мне результаты как в select2?

Большое спасибо.

Редактирование 1:

Я протестировал этот пример, но прямо он не загружает меня select2, я знаю, что использование async: false будь устаревшим, но а он не загружает dropdown. Так загрузь пустой dropdown (возможно разворачивать список, но у него нет имени выборов...?):

$.ajax({
    url: '/api/nombres',
    method: 'GET',
    async: false,
    success: function (data) {                
        $(`#nombre_${id}`).select2({
            data: data,
            language: 'es'
        });
    }
});

Видно что-то этим: introducir la descripción de la imagen aquí

2
задан 19.10.2016, 17:01
2 ответа

Основываясь на этом ответе SOen, который очень сходный с тем, что у тебя есть (это функционирует в Select2 4.0)

Ты можешь использовать функцию $.map() javascript

processResults: function (data) {
  return {
    results: $.map(data, function(obj) {
      return { id: obj.id, text: obj.nombre };
    })
  };
}
3
ответ дан 24.11.2019, 13:03
  • 1
    cambi и # 233; в это, что ты написал, и он не показывает результаты. Но спасибо. –  Maramal 19.10.2016, 16:45
  • 2
    @Maramal с respuesa juan у тебя какая-то ошибка есть в консоли? –  jasilva 19.10.2016, 17:03
  • 3
    Нет, s и # 243; я это получаю " dropdown" vac и # 237; или. Без ошибок. –  Maramal 19.10.2016, 17:05

return функции processResults должен будь быть в том же формате, что и данные, в которых он получает select2. Оно было бы чем-то как это:

<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>

Он должен иметь id, и text. Другое требование состоит в том, что без этого, оно ты не будет функционировать. Дело в том, что в return ты должен возвращаться pagination. Беря твой код осталось бы что-либо подобное:

$('#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',
});
1
ответ дан 24.11.2019, 13:03