select2 ajax processResults

https://stackoverflow.com/q/70784804/863110

by moshfeu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="js-data-example-ajax" id="mySelect2">
</select>

CSS

.js-data-example-ajax {
  width: 100%;
}

JavaScript

var data = [
  ["text1", "extra text1"] ,
  ["text2", "extra text2"] ,
  ["text3", "extra text3"] ,
];

$(document).ready(function() {
  $('.js-data-example-ajax').select2({
    placeholder: "select...",
    templateSelection: function (state) {
      if (!state.id) {
        return state.text;
      }
      return $(`<span>${state.text} & ${state.text2}</span>`);
    },
    ajax: {
      type: "POST",
      dataType: 'json',
      url: '/echo/json/',		// jsfiddle simulate ajax
      //url: 'ajaxhandler.php',
      processResults: function (data) {
        var options = [];
        if (data) {
          $.each(data.items, function (index, text) {
            options.push({ id: index, text: text[0], text2: text[1]});
          });
        }
        return {
          results: options,
          more: false
        };
      },
      data: function (params) {
        var query = {
          search: params.term,
          items: data				// only for jsfiddle to simulate ajax
        };
        if (params.term == "*") query.items = [];
        return { json: JSON.stringify( query ) }
      }
    }
  });
});