title: Select2 loading data via ajax and selecting a default value
body: <p>I am trying to pre-select a default value when i use Select2 with AJAX.</p>
  
  <p>First I had the code build up on page-load, but because my database grew to 30.000 records the perfomance has become really bad.
  So I tried using AJAX, loading and searching works perfect, but somehow AJAX broke my select function, before I used :</p>
  
  <pre><code>$("#remoteDataExample").select2("val", "Option 1");
  </code></pre>
  
  <p>This works without a problem, without AJAX.
  But with AJAX this fails, here is an jsfiddle example :</p>
  
  <p><a href="http://jsfiddle.net/Jeanpaul1994/XMAq2/400/" rel="nofollow">fiddle</a></p>
  
  <p>For the non-fiddlers here is the code :</p>
  
  <pre><code> $(document).ready(
  
  function () {
      var searchTerm = null;
      // Remote data example
      var remoteDataConfig = {
          placeholder: "Search for an option...",
          minimumInputLength: 3,
          ajax: {
              url: '/echo/json/',
              dataType: 'json',
              data: function (term, page) {
                  // Nothing sent to server side. Mock example setup.
                  searchTerm = term.toUpperCase();
              },
              results: function (data, page) {
                  // Normally server side logic would parse your JSON string from your data returned above then return results here that match your search term. In this case just returning 2 mock options.
                  return {
                      results: getMockData()
                  };
              }
          },
          formatResult: function (option) {
              return "&lt;div&gt;" + option.desc + "&lt;/div&gt;";
          },
          formatSelection: function (option) {
              return option.desc;
          }
      };
  
      function getMockData() {
          var mockData = [{
              id: 1,
              desc: 'Option 1'
          }, {
              id: 1,
              desc: 'Option 2'
          }];
          var foundOptions = [];
  
          for (var key in mockData) {
              if (mockData[key].desc.toUpperCase().indexOf(searchTerm) &gt;= 0) {
                  foundOptions.push(mockData[key]);
              }
          }
  
          return foundOptions;
      };
  
      $("#remoteDataExample").select2(remoteDataConfig);
      });
  </code></pre>
  
  <p>I am not sure where to place the select2 now, I tried placing it before the ajax, after the ajax. but none seem to work.</p>