Dropdown with select2 and jQuery ajax

Question

Dropdown with select2 and jQuery ajax

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

I am having problems trying to fill a dropdown (select) with select2 from a remote resource:

I fixed my backend code so that the API returns the following JSON code:

[
   {"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"}
]

On the other hand, I have fields that are added dynamically by clicking a " Add " button. To fill each select2 with the same results the best way I found is:

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

Just in case, there are some examples but they are not specific: link

How should I call the API to show me the results as <option value={id}>{nombre}</option> in select2?

Thank you very much.

Edition 1:

I have tried this example but I do not load the select2 directly, I know that the use of async: false is obsolete, but it does not load the dropdown. So load an empty dropdown (can you display a list but it does not have a name of the options ...?):

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

It looks something like this:

javascript jquery html json ajax

asked by Maramal 18.10.2016 в 20:35

source

2 answers

1

The return of the processResults function must be in the same format as the data that select2 receives. It would be something like this:

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

It must have id , and text . Another requirement is that without this, it will not work for you. Is that in return you have to return pagination . Taking your code would be something like this:

$('#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',
});

answered by 16.11.2016 в 06:19

Assign styles according to content Error with file on vb.net

score 3 · Accepted Answer

Based on this SOen response that is very similar to what you have (this works in Select2 4.0)

You can use the $.map() of javascript

function

processResults: function (data) {
  return {
    results: $.map(data, function(obj) {
      return { id: obj.id, text: obj.nombre };
    })
  };
}