title: select2 4.0 AJAX pre-fill howto?
body: <p>I've already read <a href="https://stackoverflow.com/questions/30499636/populate-select2-with-json-after-init-doesnt-work">this</a>, <a href="https://stackoverflow.com/questions/25451010/nested-select2-with-dependent-ajax-call">this</a>, <a href="https://stackoverflow.com/questions/18835823/loading-json-tags-into-select2-with-ajax">this</a> and according to the documentation <a href="https://stackoverflow.com/questions/30316586/select2-4-0-0-initial-value-with-ajax#30328989">the most important here</a>, but none of them work for me.
  I'm trying to use AJAX select2. I'm trying to make a generic "select" item.</p>
  
  <p>So for all the elements that have a <code>data-select2-json</code> attribute, i apply a <code>select2</code> with the ajax URL that is in the <code>data-select2-json</code> value.</p>
  
  <pre><code>$('[data-select2-json!=""][data-select2-json]').each(function() {
      var url = $(this).attr('data-select2-json');
      var pg_size = $(this).attr('data-select2-page-size') | 30;
      $(this).select2({
          language: language_code,
          tokenSeparators: [',', ' '],
          ajax: {
              url: url,
              dataType: 'json',
              delay: 300,
              data: function (params) {
                  return {
                      q: params.term, // -&gt; q=[search term]
                      page: params.page // -&gt; page=[no page]
                  };
              },
              processResults: function (data, params) {
                  params.page = params.page || 1;
                  console.log(data.items);
                  return {
                      results: data.items,
                      pagination: {
                        more: (params.page * pg_size) &lt; data.total
                      }
                  };
              },
              cache: true
          },
          // let our custom formatter work
          escapeMarkup: function (markup) { return markup; },
          minimumInputLength: 1,
          templateResult: formatRepo,
          templateSelection: formatRepoSelection
      });
  });
  </code></pre>
  
  <p>It works well!</p>
  
  <p><a href="https://i.stack.imgur.com/m8750.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m8750.jpg" alt="works well"></a></p>
  
  <p>JSON the server sends is always formatted like this:</p>
  
  <pre><code>{"items":
      [{"item": "Fran\u00e7ais", "id": 1},
       {"item": "Finlandais", "id": 5},
       {"item": "Chinois simplifi\u00e9", "id": 15}
      ],
  "total": 3}
  </code></pre>
  
  <p>It's very close to the AJAX sample you <a href="https://select2.github.io/examples.html" rel="nofollow noreferrer">can find in the documentation</a>. My problem is AJAX initiatilize: I want either to add the values in the HTML:</p>
  
  <pre><code>&lt;select multiple="multiple" class="form-control"
          data-select2-json="/fr/chez-moi/tags/langues"
          multiple="multiple"
          name="known_languages"&gt;
      &lt;option value="1" selected="selected"&gt;Français&lt;/option&gt;
      &lt;option value="2" selected="selected"&gt;Chinois simplifié&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>and then initialize with select2 (= the code <code>$(this).select2({..</code> above ) but this doesnt work and gives me blank values:</p>
  
  <p><a href="https://i.stack.imgur.com/WLWoa.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WLWoa.jpg" alt="blank value"></a></p>
  
  <p>NB: <a href="https://stackoverflow.com/questions/30316586/select2-4-0-0-initial-value-with-ajax#30328989">the solution here given by Kevin Brown</a> doesn't work either and gives me exactly the same result.</p>
  
  <p>The other solution is to ask in AJAX to the URL with a parameter like "<code>&amp;init=1</code>" (or something like that) so the server will send results with added parameters like <code>checked: true</code> for each value, and I will call <code>select2</code> with those values.</p>
  
  <p>Nothing clear in the documentation on how to pre-fill <code>select2</code>. How should I do?</p>
  
  <p>Here are my other functions:</p>
  
  <pre><code>function item_or_text(obj) {
      if (typeof(obj.item)!='undefined') {
          return (obj.item.length ? obj.item : obj.text);
      }
      return obj.text;
  }
  
  function formatRepo(data) {
      if (data.loading) return data.text;
      var markup = item_or_text(data);
      console.log('formatRepo', data, markup);
      return markup;
  }
  
  function formatRepoSelection(item) {
      var retour = item_or_text(item);
      console.log('formatRepoSelection', item, item.item, retour);
      return retour;
  }
  </code></pre>