Select2 - load data once from remote but perform search on client

Question

I am trying to use "query" object to perform what i want. Everythings works except when i select an option nothing happen (placeholder is not replaced). I have followed the instructing from this post Loading remote data only once with Select2

init() {
    this.$view.select2({
        theme: "bootstrap",
        language: "fr",
        allowClear: this.options.allowClear,
        placeholder: this.options.placeholder,
        query: (query) => {
            if (this.items) {
                query.callback({results: this.filterItems(query.term)});
            } else {
                this.loadData(query);
            }

        },
        templateResult: (state) => {
            return this.format(state);
        }
    });

}

loadData(query) {
    $.ajax({
        url:  this.options.url,
        dataType: 'json',
        type: 'GET',
        success: (data) => {
            this.items = [];
            for (let row of data) {
                this.items.push({
                    id: row.id,
                    entity_id: row.entity_id,
                    text: row.label,
                    type: row.type,
                    disabled: !row.enable
                });
            }

            query.callback({results: this.items});
        }
    });
}

filterItems(term) {
    if (typeof term == "undefined" || term === null) {
        return this.items;
    }

    const _term = $.trim(term.toLowerCase());
    if (_term === '') {
        return this.items;
    }

    return this.items.filter((item) => {
        return item.text.toLowerCase().includes(term);
    });
}

Thanx for help,

Answer 1

I think i have found a solution :

var s2data = $view.select2({
  ajax: {
    url: 'https://api.github.com/search/repositories',
    data: {
        q: 'select2'
    },
    dataType: 'json',
    processResults: function(data) {
      var items = [];
      for (var row of data.items) {
        items.push({
          id: row.id,
          text: row.name
        });
      }

      this.options.set('cacheDataSource', {items: items});

      return {
        results: items
      };
    }
  },
  cacheDataSource: [],
  allowClear: true,
  placeholder: 'Select Values ...',
  width: '100%',
}).data('select2');

s2data.dataAdapter.query = function(params, callback) {

  var cacheDataSource = this.options.get('cacheDataSource');
  if (cacheDataSource && cacheDataSource.items) {

    var term = params.term;
    if (typeof term == "undefined" || term == null) {
        callback({results: cacheDataSource.items});
        return
    }

    term = $.trim(term.toLowerCase());
    if (term == "") {
        callback({results: cacheDataSource.items});
        return
    }

    callback({ results: cacheDataSource.items.filter(function(item) {
        return item.text.toLowerCase().includes(term);
      })
    });
  } else {
    // call the original logic
    var ajaxAdapterFunc = jQuery.fn.select2.amd.require('select2/data/ajax');
    var ajaxAdapter = new ajaxAdapterFunc(this.$element, this.options);

    ajaxAdapter.query(params, callback);
  }
}

jsfiddle : https://jsfiddle.net/3kpu4htm/35/