title: select2 - combining getting remote data with muliple select and pre data
body: <p>Hi I am looking to use select 2 and what I have seen so far it looks good. I am trying to do one thing though.</p>
  
  <p>I am looking to get my data with an ajax call to a json file - there is an example on their website on how to do this but I am trying to have a prepopulates list.</p>
  
  <p>What I mean by this is when a user for example has clicked on search for a movie on this link</p>
  
  <p><a href="http://ivaynberg.github.io/select2/#infinite" rel="noreferrer">http://ivaynberg.github.io/select2/#infinite</a></p>
  
  <p>the first 10 movies in the json file are listed so there are some prechoices.</p>
  
  <p>Can anyone point me in the right dieection</p>
  
  <p>here is my code so far</p>
  
  <pre><code>function movieFormatResult(movie) {
      var markup = "&lt;table class='movie-result'&gt;&lt;tr&gt;";
      if (movie.posters !== undefined &amp;&amp; movie.posters.thumbnail !== undefined) {
          markup += "&lt;td class='movie-image'&gt;&lt;img src='" + movie.posters.thumbnail + "'/&gt;&lt;/td&gt;";
      }
      markup += "&lt;td class='movie-info'&gt;&lt;div class='movie-title'&gt;" + movie.title + "&lt;/div&gt;";
      if (movie.critics_consensus !== undefined) {
          markup += "&lt;div class='movie-synopsis'&gt;" + movie.critics_consensus + "&lt;/div&gt;";
      }
      else if (movie.synopsis !== undefined) {
          markup += "&lt;div class='movie-synopsis'&gt;" + movie.synopsis + "&lt;/div&gt;";
      }
      markup += "&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;"
      return markup;
  }
  
  function movieFormatSelection(movie) {
      return movie.title;
  }
  
  $(document).ready(function() {
  $("#e7").select2({
      placeholder: "More",
      minimumInputLength: 3,
      ajax: {
          url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
          dataType: 'jsonp',
          quietMillis: 100,
          data: function (term, page) { // page is the one-based page number tracked by Select2
              return {
                  q: term, //search term
                  page_limit: 10, // page size
                  page: page, // page number
                  apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
              };
          },
          results: function (data, page) {
              var more = (page * 10) &lt; data.total; // whether or not there are more results available
  
              // notice we return the value of more so Select2 knows if more results can be loaded
              return {results: data.movies, more: more};
          }
      },
      formatResult: movieFormatResult, // omitted for brevity, see the source of this page
      formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
      dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
      multiple: true,
      escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
  });
  });
  </code></pre>
  
  <p>and the html</p>
  
  <pre><code>    &lt;article class="row" id="infinite"&gt;
  &lt;div class="span12"&gt;
  
     &lt;p&gt; 
   &lt;input type="hidden" class="bigdrop" id="e7" style="width:200px"/&gt; 
  
  
  
     &lt;/p&gt;
  
  &lt;/div&gt;
  &lt;/article&gt;
  </code></pre>