Edit in JSFiddle

$(document).ready(function() {

  function formatList(list) {
    var markup = "<ul>" +
      "<li>" +
      "<p>" + list.text + "</p>" +
      "<p> price: " + list.price + "</p>" +
      "</li>" +
      "</ul>";
    return markup;
  }

  function formatListSelection(list) {
    return list.text;
  }

  var S2 = $("select");
  S2.select2({
    ajax: {
      //https://api.myjson.com/bins/cd4yn
      url: "https://api.myjson.com/bins/cd4yn",
      dataType: 'json',
      delay: 250,
      data: function(params) {
        return {
          q: params.term, // search term
        };
      },
      processResults: function(data) {
        var processData = [];

        for (key in data) {
          console.log(data[key]);
          var one = {};
          one.id = data[key].id;
          one.text = data[key].name;
          one.price = data[key].price;
          processData.push(one);
        }
        return {
          results: processData
        };
      },
      cache: true
    },
    escapeMarkup: function(markup) {
      return markup;
    },
    minimumInputLength: 1,
    templateResult: formatList,
    templateSelection: formatListSelection
  });

  //set default value
  var $option = $("<option selected></option>").val("119").text("Apple");
  S2.append($option).trigger('change');
  $option.removeData();

});
<select name="status" multiple="multiple">
</select>
select {
  width: 420px;
}

p {
  margin: 0;
}

ul {
  margin: 0;
}

li {
  margin: 0;
}

External resources loaded into this fiddle: