Populate Select2 with json

Question

My function is:

jQuery.post("example.php",{}, function(data){$("#select2").html('').select2({data: data});});

and return json: {"results":[{"id":"aasd23423d3d","text":"dfasie"},{"id":"asdf2fsdf","text":"velder"}"}]}

but select2 is filling in separating the letters from the words, like the picture

Image Select2

Answer 1

The last argument of jQuery.post is dataType . Try setting it to 'json' and the data will get parsed internally to an object for you.

It appears that currently jQuery is assuming it is just text coming from server

If you are in control of the php code you also should set content type header for application/json

jQuery.post("example.php", 
   {}, 
   function(data) {
      $("#select2").html('').select2({
         data: data
      });
   },
   'json'
);

Answer 2

Try:

<select id="select2"></select>

$('#select2').select2({
  ajax: {
    type: 'POST',
    url: 'example.php',
    data: {},
    dataType: 'json'
    processResults: function (data) {
      return {
        results: data.results
      };
    }
  }
});

To know more, visit Select2 with Ajax