<Select> widget with infinite scroll dropdown

Answer 1

This can be achieved with simple JQuery. No need of any other plugin

var selectObj = $("#myselectbox");
var singleoptionheight = selectObj.find("option").height();
var selectboxheight = selectObj.height();
var numOfOptionBeforeToLoadNextSet = 2;
var lastScrollTop = 0;
var currentPageNo = 1;
var isAppending = false;
var currentScroll = 0;

$(document).ready(function() {
  $(selectObj).scroll(function(event) {
    OnSelectScroll(event);
  });
});

function OnSelectScroll(event) {
  var st = $(selectObj).scrollTop();
  var totalheight = selectObj.find("option").length * singleoptionheight;
  if (st > lastScrollTop) {
    // downscroll code
    $("#direction").html("downscroll");
    currentScroll = st + selectboxheight;
    $("#scrollTop").html(currentScroll);
    $("#totalheight").html(totalheight);

    if ((currentScroll + (numOfOptionBeforeToLoadNextSet * singleoptionheight)) >= totalheight) {
      currentPageNo++;
      LoadNextSetOfOptions(currentPageNo);
    }

  } else {
    // upscroll code
    $("#direction").html("upscroll");
  }
  lastScrollTop = st;
}



function LoadNextSetOfOptions(pageNo) {
  //here we can have ajax call to fetch options from server.
  //for demo purpose we will have simple for loop
  //assuming pageNo starts with 1
  var startOption = ((pageNo - 1) * 10) + 1; //for example if pageNo is 2 then startOption = (2-1)*10 + 1 = 11
  var endOption = startOption + 10; //for example if pageNo is 2 then endOption = 11 + 10 = 21

  for (i = startOption; i < endOption; i++) {
    $(selectObj).append("" + i + "");
  }

  $(selectObj).scrollTop(currentScroll - (selectboxheight));

}

  
  



  
Infinite scroll for select box