Select2 - загрузить данные один раз с удаленного компьютера, но выполнить поиск на клиенте - PullRequest
Новая
       9

Select2 - загрузить данные один раз с удаленного компьютера, но выполнить поиск на клиенте

0 голосов
/ 27 февраля 2020

Я пытаюсь использовать объект «запрос», чтобы выполнить то, что я хочу. Все работает, кроме случаев, когда я выбираю опцию, ничего не происходит (заполнитель не заменяется). Я следовал инструкциям из этого поста Загрузка удаленных данных только один раз с помощью 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);
    });
}

Спасибо за помощь,

1 Ответ

0 голосов
/ 27 февраля 2020

Я думаю, что нашел решение: 

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/

...