Select2 with pagination

Pagination for existing element

by dpnminh

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.min.css">
<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>
        <input type="hidden" id="e24" style="width:100%;" placeholder="type a number, scroll for more results"/>
    </div>

CSS

.capitalize {
  text-transform: capitalize;
}

JavaScript

// 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
        };
      });
      array.push({
        id: 20001,
        text: "maya-20001"
      })
    return 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(this.data, function (e) {
          return (e.text.toUpperCase().indexOf(q.term.toUpperCase()) >= 0);
        });
      } else if (q.term === "") {
        results = this.data;
      }
     ...