How to enable infinite scrolling in select2 4.0 without ajax

Question

I am using select2 with custom data adapter. All of the data provided to select2 is generated locally in web page (so no need to use ajax). As query method can generate a lot of results (about 5k) opening select box is quite slow.

As a remedy, I wanted to use infinite scroll. Documentation for custom data adapter says that query method should receive page parameter together with term:

@param params.page The specific page that should be loaded. This is typically provided when working with remote data sets, which rely on pagination to determine what objects should be displayed.

But it does not: only term is present. I tried to return more: true or more: 1000, but this didn't help. I guess this is because, by default, infinite scroll is enabled iff ajax is enabled.

I am guessing that enabling infinite scroll will involve using amd.require, but I am not sure what to do exactly. I tried this code:

$.fn.select2.amd.require(
    ["select2/utils", "select2/dropdown/infiniteScroll"],
    (Utils, InfiniteScroll) =>
      input.data("select2").options.options.resultsAdapter = 
        Utils.Decorate(input.data("select2").options.options.resultsAdapter, InfiniteScroll)
)

This is coffee script, but I hope that it is readable for everyone. input is DOM element containing select box - I earlier did input.select2( //options )

My question is basically, how do I enable infinite scroll without ajax?

Answer 1

My solution for angular 9

  this.$select2 = this.$element.select2({
    width: '100%',
    language: "tr",
    ajax: {
      transport: (params, success, failure) => {
        let pageSize = 10;
        let page = (params.data.page || 1);
        let results = this.options
          .filter(i => new RegExp(params.data.term, "i").test(i.text))
          .map(i => {
            return {
              id: i.value,
              text: i.text
            }
          });
        let paged = results.slice((page - 1) * pageSize, page * pageSize);

        let options = {
          results: paged,
          pagination: {
            more: results.length >= page * pageSize
          }
        };
        success(options);
      }
    }
  });
}