Select2

by Dorababu Meka

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js"></script>
<input type='text' id='ddlLag1' style="width:50%" />

JavaScript

function mockData1() {
  var dict = [];
  var buttonarray = {
    "-1": "Select All",
    "0": "shwag",
    "1": "xzdpq",
    "2": "xibdx",
    "3": "gjcxq",
    "4": "zwnfq",
    "5": "ltqsq",
    "6": "kraoj",
    "7": "nvrii",
    "8": "zumji",
    "9": "ektcw",
    "10": "aivks",
    "11": "wtqjv",
    "12": "dilzf",
    "13": "ginuk",
    "14": "ksuoq",
    "15": "fjexl",
    "16": "banvq",
    "17": "cwqvn",
    "18": "tfhne",
    "19": "rinec",
    "20": "wwzsl",
    "21": "ingun",
    "22": "nptyt",
    "23": "dupic",
    "24": "krrgr",
    "25": "fkhjy",
    "26": "wvzvo",
    "27": "eavki",
    "28": "opwha",
    "29": "dmjtb",
    "30": "large text large text",
  };
  for (var key in buttonarray) {
    dict.push({
      id: key,
      text: buttonarray[key]
    });
  }
  return dict;
}

$(document).ready(function() {
  $('#ddlLag1').select2({
    //minimumResultsForSearch: -1,
    data: mockData1(),
    //placeholder: 'search',
    multiple: false,
    // query with pagination
    query: function(q) {
      var pageSize,
        results,
        that = this;
      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(that.data, function(e) {
          if (e.text != undefined) {
            return e.text.toUpperCase().indexOf(q.term.toUpperCase()) >= 0;
          }
        });
      } else if (q.term === '' || q.term === undefined) {
        results = that.data;
      }
      q.callback({
        results: results.slice((q.page - 1) * pageSize, q.page * pageSize),
        more: results.length >= q.page * pageSize
      });
    }
  });
});