Demo - ComboBox with Infinite Scrolling

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">

  <h1>
    ComboBox with Infinite Scrolling
  </h1>

  <p>
    The ComboBox below populates the drop-down list
    by adding a few items whenever the user scrolls
    near the bottom of the list.
    This provides an 'infinite scrolling' experience
    (except this sample limits the number of items to
    2,000).</p>
  <div id="theCombo"></div>
</div>

CSS

body {
  margin-bottom: 36px;
}

body {
  margin-bottom: 24px;
}

JavaScript

onload = function() {

	// list that contains the items in the Combo (start with 10 items)
	var theList = [];
  loadItems(theList, 10);
  
  // ComboBox to show the items
	var theCombo = new wijmo.input.ComboBox('#theCombo', {
  	itemsSource: theList
	});
  
  // add items when user scrolls near the bottom of the list
  theCombo.dropDown.addEventListener('scroll', function(e) {

		// stop adding items when the list reaches 2,000 items
  	if (theList.length < 2000) {
    	var list = e.target;

      // if the user scrolled near the bottom of the list
    	if (list.scrollTop + list.clientHeight + 100 > list.scrollHeight) {
      
      	// save scroll top, add items, refresh list, restore scroll top
      	var top = list.scrollTop;
      	loadItems(theList, 5);
        theCombo.collectionView.refresh();
        list.scrollTop = top;
      }
    }
  });
  
  // add some items to the list
  function loadItems(arr, cnt) {
  	for (var i = 0; i < cnt; i++) {
    	arr.push('item ' + (arr.length + 1));
    }
  }
  
}