JquerySelector2 using local data

Selector 2 using ajax,pageing

by Mani Deep

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<select class="js-data-example-ajax" id="e1" style="width: 500px">
  <option value="3620194" selected="selected">select2/select2</option>
</select>

JavaScript

var searchTerm = null;
var $ajax = $("#e1");
 $ajax.select2({
    ajax: {
      url: '/echo/json/',
      dataType: 'json',
      delay: 250,
      data: function (params) {
           searchTerm = params.term.toUpperCase();
      },
      processResults: function (data, params) {
        // parse the results into the format expected by Select2
        // since we are using custom formatting functions we do not need to
        // alter the remote JSON data, except to indicate that infinite
        // scrolling can be used
        params.page = params.page || 1;

        return {
          results: getMockData(),
          pagination: {
            more: (params.page * 30) < data.total_count
          }
        };
      },
      cache: true
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 1,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
  });

 function formatRepoSelection (repo) {
    return repo.desc || repo.text;
  }
function formatRepo (repo) {
    if (repo.loading) return repo.text;

    var markup = repo.desc + ' || ' + repo.id + '</div>';
    return markup;
  }
function getMockData() {
    var mockData = [{
        id: 1,
        desc: 'Option 1'
    }, {
        id: 2,
        desc: 'Option 2'
    }];
    var foundOptions = [];
    
    for (var key in mockData) {
        if (mockData[key].desc.toUpperCase().indexOf(searchTerm) >= 0) {
            foundOptions.push(mockData[key]);
        }
    }
alert(foundOptions);    
    return foundOptions;
};