title: How can I set the initial value of Select2 when using AJAX?
body: <p>I have a select2 v4.0.0 being populated from an Ajax array. If I set the val of the select2 I can see via javascript debugging that it has selected the correct item (#3 in my case), however this is not shown in the select box, it is still showing the placeholder.
  <img src="https://i.stack.imgur.com/Avj4C.png" alt="enter image description here"></p>
  
  <p>Whereas I should be seeing something like this:
  <img src="https://i.stack.imgur.com/gwBZa.png" alt="enter image description here"></p>
  
  <p>In my form fields:</p>
  
  <pre><code>&lt;input name="creditor_id" type="hidden" value="3"&gt;
  &lt;div class="form-group minimal form-gap-after"&gt;
      &lt;span class="col-xs-3 control-label minimal"&gt;
          &lt;label for="Creditor:"&gt;Creditor:&lt;/label&gt;
      &lt;/span&gt;
      &lt;div class="col-xs-9"&gt;
          &lt;div class="input-group col-xs-8 pull-left select2-bootstrap-prepend"&gt;
              &lt;select class="creditor_select2 input-xlarge form-control minimal select2 col-xs-8"&gt;
                  &lt;option&gt;&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My javascript:</p>
  
  <pre><code>var initial_creditor_id = "3";
  $(".creditor_select2").select2({
      ajax: {
         url: "/admin/api/transactions/creditorlist",
         dataType: 'json',
         delay: 250,
         data: function (params) {
             return {
                  q: params.term,
                  c_id: initial_creditor_id,
                  page: params.page
             };
         },
         processResults: function (data, page) {
              return {
                  results: data
              };
         },
         cache: true
     },
     placeholder: "Search for a Creditor",
     width: "element",
     theme: "bootstrap",
     allowClear: true
     }).on("select2:select", function (e) {
        var selected = e.params.data;
        if (typeof selected !== "undefined") {
             $("[name='creditor_id']").val(selected.creditor_id);
             $("#allocationsDiv").hide();
             $("[name='amount_cash']").val("");
             $("[name='amount_cheque']").val("");
             $("[name='amount_direct']").val("");
             $("[name='amount_creditcard']").val("");
          }
      }).on("select2:unselecting", function (e) {
          $("form").each(function () {
              this.reset()
          });
          ("#allocationsDiv").hide();
          $("[name='creditor_id']").val("");
      }).val(initial_creditor_id);
  </code></pre>
  
  <p>How can I make the select box show the selected item rather than the placeholder? Should I be sending this as part of the AJAX JSON response perhaps?</p>
  
  <p>In the past, Select2 required an option called initSelection that was defined whenever a custom data source was being used, allowing for the initial selection for the component to be determined. This worked fine for me in v3.5.</p>