title: How to pre-load an array via ajax and use it for select2?
body: <p>My general problem is that I want to have a Javascript variable which I then use with select2, to prepare the options  for a select multiple. I have a fairly large array (7000 objects) and just want to store that once in a variable rather than constantly polling the server with search terms. Here is what I got.</p>
  
  <p>The HTML is simply:</p>
  
  <pre><code>&lt;input type="hidden" id="group_a" multiple="multiple" placeholder="Select at least two treatments"&gt;
  </code></pre>
  
  <p>Now, when I write the variable directly everything works as expected:</p>
  
  <pre><code>var treatments = [{id: 1, text: "you"}, {id: 2, text: "me"}];
  $("#group_a").select2({
      data: treatments,
      minimumInputLength: 1,
      multiple: true,
      closeOnSelect: false,
      width: "660px"
  });
  </code></pre>
  
  <p>However, when I use ajax to load the array things get weird. My code to do that:</p>
  
  <pre><code>$.ajax({
      url: '/funny/url',
  }).done(function(data) {
      treatments = data.choices;
  });
  </code></pre>
  
  <p>I tend to get the following error unless I use the debugger to step through the code, then it works as expected. So could this somehow be a timing issue?</p>
  
  <pre><code>uncaught exception: query function not defined for Select2 group_a
  </code></pre>
  
  <p>My complete javascript looks like below and I've also prepared a <a href="http://jsfiddle.net/2fb1d0mt/8/" rel="nofollow">fiddle</a> which shows the same error.</p>
  
  <pre><code>$(document).ready(function() {
      var treatments;
      $.ajax({
          url: '/funny/url',
      }).done(function(data) {
          treatments = data.choices;
      });
      $("#group_a").select2({
          data: treatments,
          minimumInputLength: 1,
          multiple: true,
          closeOnSelect: false,
          width: "960px"
      });
  });
  </code></pre>