select2 with pagination for large data sets

<!DOCTYPE html>
<html>
  <head>
    <link data-require="bootstrap-css@3.3.4" data-semver="3.3.4" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
  <div class="container">
  <div class="page-header">
    <h1>select2 with pagination</h1>
    <p>for improved performance with large data sets (20 000 items)</p>
    </div>
        <select class="form-control" id="e24"></select>
    </div>
    <!--[if lt IE 9]>
     <script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>
    <![endif]-->
    <!--[if gte IE 9]><!-->
    <script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <!--<![endif]-->
    <script data-require="lodash-underscore@3.7.0" data-semver="3.7.0" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script>
    <script src="script2.js"></script>
  </body>
</html>

// Function to shuffle the demo data 
var shuffle = function (str) {
    return str.split('').sort(function () {
      return 0.5 - Math.random();
    }).join('');
  };

// For demonstration purposes we first make
// a huge array of demo data (20 000 items)
// HEADS UP; for the _.map function i use underscore (actually lo-dash) here
var mockData = function () {
    var array = _.map(_.range(1, 20000), function (i) {
        return {
          id  : i,
          text: shuffle('te ststr ing to shuffle') + ' ' + i
        };
      });
    return array;
    console.log(array);
  };

$(function () {
  // create demo data
  var dummyData = mockData();
  // set initial value(s)
  $('#e24').val([
    dummyData[75].text, dummyData[1897].text
  ]);

  // init select 2
  $('#e24').select2({
    data             : dummyData,
    // init selected from elements value
    initSelection    : function (element, callback) {
      var initialData = [];
      $(element.val().split(",")).each(function () {
        initialData.push({
          id  : this,
          text: this
        });
      });
      callback(initialData);
    },

    // NOT NEEDED: These are just css for the demo data
    dropdownCssClass : 'capitalize',
    containerCssClass: 'capitalize',

    // configure as multiple select
    multiple         : true,

    // NOT NEEDED: text for loading more results
    formatLoadMore   : 'Loading more...',
    
    // query with pagination
    query            : function (q) {
      var pageSize,
        results;
      pageSize = 20; // or whatever pagesize
      results  = [];
      if (q.term && q.term !== "") {
        // HEADS UP; for the _.filter function i use underscore (actually lo-dash) here
        results = _.filter($('#e24').select2().data, function (e) {
          return (e.text.toUpperCase().indexOf(q.term.toUpperCase()) >= 0);
        });
      } else if (q.term === "") {
        results = $('#e24').select2().data;
      }
      q.callback({
        results: results.slice((q.page - 1) * pageSize, q.page * pageSize),
        more   : results.length >= q.page * pageSize
      });
    }
  });
});

.capitalize {
  text-transform: capitalize;
}

// Function to shuffle the demo data 
var shuffle = function (str) {
    return str.split('').sort(function () {
      return 0.5 - Math.random();
    }).join('');
  };

// For demonstration purposes we first make
// a huge array of demo data (20 000 items)
// HEADS UP; for the _.map function i use underscore (actually lo-dash) here
var mockData = function () {
    var array = _.map(_.range(1, 5000), function (i) {
        return {
          id  : i,
          text: shuffle('te ststr ing to shuffle') + ' ' + i
        };
      });
    return array;
  };

$(function () {
  // create demo data
  var dummyData = mockData();
  // set initial value(s)
  $('#e24').val([
    dummyData[75].text, dummyData[187].text
  ]);

  // init select 2
  $('#e24').select2({
    data: dummyData,
        // NOT NEEDED: These are just css for the demo data


    // configure as multiple select
    multiple         : true,

    // NOT NEEDED: text for loading more results
    formatLoadMore   : 'Loading more...',
    // query with pagination
    query: function (q) {
      var pageSize = 20, results = _.filter(this.data, function(e) {
        return (q.term == "" ||
           e.text.toUpperCase().indexOf(
               q.term.toUpperCase()) >= 0 );
      });
      q.callback({results:results.slice((q.page-1)*pageSize, q.page*pageSize),
                  more:results.length >= q.page*pageSize });
}
    
  });
});