Get Data on scroll in dropdown in Ajax JS call

Bootstrap Multiselect dropdown, with scroll populating

==================================================

function CustomerMultiSelect() {

    $("#ddlCustomer").attr("multiple", "multiple");

    $('#ddlCustomer').multiselect({

        includeSelectAllOption: false,

        enableFiltering: true,

        enableCaseInsensitiveFiltering: true,

        maxHeight: 200,

        buttonWidth: '165px',

        onChange: function (option, checked) {

            var customer = $("#ddlCustomer").val();

            console.log(bluebook);

        }

    });

    $("#ddlCustomer").multiselect('clearSelection');

    $('.multiselect-clear-filter').css('display', 'none');

    $('.multiselect-search').css('width', '97%');

    $('.customer ul')[0].addEventListener('scroll', dataLoadOnScroll, true);

}

fetch data on Ajax call and bind 100 records at once

=======================================

 function GetCustomers(bluebook) {

    $('#custLoad').show();

    var blValues = bluebook.toString();

    if (bluebook !== "null")

    {

        $.ajax({

            url: "Default.aspx/GetCustomersOnBluebook",

            type: "POST",

            data: JSON.stringify({"values":blValues}),

            contentType: 'application/json;charset=utf-8',

            dataType: 'JSON',

            success: function (data) {

                $('#ddlCustomer').multiselect('destroy');

                $('#ddlCustomer').empty();

                var option = "";

                if (data != null) {

                    alert(data.d.length);

                    currentRecordNumber = 300; page = 2;

                    datasource = data.d;

                    var newData = data.d.slice(0, 300);

                    for (i = 0; i < newData.length; i++) {

                        option += '<option value="' + newData[i].ID + '">' + newData[i].Name + '</option>';                       

                    }

                    $('#ddlCustomer').append(option);

                }

                CustomerMultiSelect();

                $('#custLoad').hide();

            },

            failure: function (error) {

                console.log(JSON.stringify(error));

            }

        });

    }

}

= scroll function bind

=============================================

var currentRecordNumber; var page;

function dataLoadOnScroll() {

     var currentPage;

    var ul = $('.customer ul')[0];

    if (Math.ceil(ul.scrollTop + ul.offsetHeight) >= ul.scrollHeight) {

        const newDatasource = getPaginatedData();

        if (newDatasource) {

            currentRecordNumber = currentRecordNumber + newDatasource.length;

            currentPage = page;

            var option = "";

            for (i = 0; i < newDatasource.length; i++) {

                option += '<option value="' + newDatasource[i].ID + '">' + newDatasource[i].Name + '</option>';

              }

            $('#ddlCustomer').append(option);

            $('#ddlCustomer').multiselect('rebuild');

        }

        else {

            $('.customer ul')[0].removeEventListener('scroll', dataLoadOnScroll, true);

        }       

    }

    $('.customer .multiselect-clear-filter').css('display', 'none');

}

function getPaginatedData() {

    let numberOfRecordsToDisplay = 300;

    let returnArray = "";

    let startingIndex = numberOfRecordsToDisplay * page - numberOfRecordsToDisplay;

    let endingIndex = numberOfRecordsToDisplay * page - 1;

    if (datasource.length > startingIndex && datasource.length >= endingIndex) {

        if (startingIndex !== -300)

            returnArray = datasource.slice(startingIndex, endingIndex + 1);

        else

            return returnArray;

    }

    else if (datasource.length > startingIndex && datasource.length < endingIndex) {

        returnArray = datasource.slice(startingIndex);

    }

    page = datasource.length > endingIndex ? page + 1 : 0

    return returnArray;

}