title: preloading external json into select box then after search getting specific results
body: <p>so i am looking into loading external data in an select2 box where there is prepopulate results from the json</p>
  
  <p>i have two issue - getting the data in and then only loading the first few but when a user searches it passes the request to the rest and then the specific json is returned</p>
  
  <p>so the HTML is a simple as </p>
  
  <pre><code>&lt;input type="hidden" id="e21" style="width:300px;"/&gt; 
  </code></pre>
  
  <p>the inital js is </p>
  
  <pre><code>$(document).ready(function () {
      $('#e21').select2({
          query: function (query){
          var data = {results: []};
          console.log(data);
          $.each(preload_data, function(){
              if(query.term.length == 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) &gt;= 0 ){
                  data.results.push({id: this.id, text: this.text });
              }
          });
  
          query.callback(data);
          }
      });
  
      $('#e21').select2('data', preload_data );
  
  });
  </code></pre>
  
  <p>what that does is load in preload_data so that could be</p>
  
  <pre><code>var preload_data = [
  { id: 'user0', text: 'Disabled User'}, 
  { id: 'user1', text: 'Jane Doe'},
  { id: 'user2', text: 'John Doe', locked: true },
  { id: 'user3', text: 'Robert Paulson', locked: true },
  { id: 'user5', text: 'Spongebob Squarepants'},
  { id: 'user6', text: 'Planet Bob' },
  { id: 'user7', text: 'Inigo Montoya' }
  ];
  </code></pre>
  
  <p>an example is here </p>
  
  <p><a href="http://jsfiddle.net/dwhitmarsh/MfJ4B/10/" rel="nofollow">http://jsfiddle.net/dwhitmarsh/MfJ4B/10/</a></p>
  
  <p>but instead of preload_data i want to load in load in a ajax call and pass the results</p>
  
  <p>so i could use </p>
  
  <pre><code>var preload_data = $.ajax({
   url: 'data/more.json',
   method: 'get',
   dataType: 'json'
  }); 
  </code></pre>
  
  <p>but need to wait for the json to load and only want to load in the first 10.</p>
  
  <p>then when a user actually searches i want to pass extra variables like </p>
  
  <pre><code>string: term, //search term
  page_limit: 10, // page size
  page: page // page number
  </code></pre>
  
  <p>page is part of the select 2</p>
  
  <p>can anyone help?</p>
  
  <p>btw the more.json looks like</p>
  
  <pre><code>{
      "total": 8, 
      "result": [{
              "id": "1",
              "label": "Type",
              "safeName":"type",
              "jsonFile": "type.json"
  
      },{
              "id": "2",
              "label": "Primary Applicant Name",
              "safeName":"primaryApplicantName",
              "jsonFile": "primary.json"
      },{
              "id": "3",
              "label": "Address",
              "safeName":"address",
              "jsonFile": "address.json"
      },{
              "id": "4",
              "label": "Product",
              "safeName":"product",
              "jsonFile": "product.json"
      },{
              "id": "5",
              "label": "Verification",
              "safeName": "verification",
              "jsonFile": "verification.json"
  
      },{
              "id": "6",
              "label": "Documents",
              "safeName": "documents",
              "jsonFile": "documents.json"
      },{
              "id": "7",
              "label": "Suburb",
              "safeName": "suburb",
              "jsonFile": "suburb.json"
      },{
              "id": "8",
              "label": "State",
              "safeName": "state",
              "jsonFile": "state.json"
  
  
      }]
  }
  </code></pre>