JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<select id="ddlHotelId" name="ddlHotelId" class="form-control" >
			<option value="">Select item</option>
</select>

JavaScript

function Select2PagingPlugin() {
	
	var _dataSource = null;
	var _pageSize = 50;
	
	this.init = function(dataSource, pageSize) {
		_dataSource = dataSource;
    if (pageSize)
    	_pageSize = pageSize;
	}
	
	
	$.fn.select2.amd.require(["select2/data/array", "select2/utils"],
		function (ArrayData, Utils) {
			function CustomData($element, options) {
				CustomData.__super__.constructor.call(this, $element, options);
			}
			Utils.Extend(CustomData, ArrayData);

			CustomData.prototype.query = function (params, callback) {
				if (!params.page) {
					params.page = 1;
				}
				var results = null;
				if (params.term == undefined) {
					results = _dataSource.slice(0, _pageSize);
				}
				else {
					results = _.filter(_dataSource, function(item) { 
						return (item.text.toLowerCase().indexOf(params.term.toLowerCase()) >= 0);
					}); 
				}
				
				var data = {};
				data.results = results.slice((params.page - 1) * _pageSize, params.page * _pageSize);
				data.pagination = {};
				data.pagination.more = params.page * _pageSize < _dataSource.length;
				callback(data);
			};

			$(document).ready(function () {
				$("select").select2({
					ajax: {},
					dataAdapter: CustomData
				});
			});
		});
}

$(document).ready(function () {
	var randLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    
  var dataSource = [];
		for (var i = 0; i < 40000; i++)
    {
			var randText = '';
      for( var r=0; r < 5; r++ ) {
        randText += randLetters.charAt(Math.floor(Math.random() * randLetters.length));
       }
      var item = { text : randText, id: i };
      dataSource.push(item);
		}
		
		pagingPlugin = new Select2PagingPlugin();
		pagingPlugin.init(dataSource);

});