Aurelia Select2，加載遠程數據不加載下一頁

Question

我正在嘗試使用Select2並在Aurelia中加載遠程數據（ajax）。 因此，我創建了一個名為Select2的自定義屬性，並遵循文檔中的選項。

但是，當我滾動到下拉列表的末尾時，我遇到一個問題，即出現“正在加載更多結果”消息，但沒有加載更多數據或調用API（使用Select2文檔中的相同API來確保我不丟失任何內容）。

import { customAttribute, inject , bindable, bindingMode} from 'aurelia-framework';
import 'jquery';
import 'select2'; 

@customAttribute('select2')
@inject(Element)
export class Select2CustomAttribute {
    element;

    constructor(element) {
        this.element = element;
    }

    attached() {

               var self=this;

        $(this.element).select2(
            {
               // closeOnSelect: false,
                 allowClear: true,        
                ajax: {
    url: "https://api.github.com/search/repositories",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    processResults: function (data, params) {
      // parse the results into the format expected by Select2
      // since we are using custom formatting functions we do not need to
      // alter the remote JSON data, except to indicate that infinite
      // scrolling can be used
      params.page = params.page || 1;

      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
                escapeMarkup: function (markup) { return markup; }, 
                minimumInputLength:0,
                templateResult: function( repo )
                            {
                                if (repo.loading) return repo.text;

      var markup = "<div class='select2-result-repository clearfix'>" +
        "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
        "<div class='select2-result-repository__meta'>" +
          "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

      if (repo.description) {
        markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
      }

      markup += "<div class='select2-result-repository__statistics'>" +
        "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
        "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
        "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
      "</div>" +
      "</div></div>";

      return markup;

                            },
                             templateSelection: function (repo) { return repo.full_name || repo.text; } ,

            }
        ).on('change', evt => {
                if (!evt.originalEvent) {
                    try{
                        this.element.dispatchEvent(new Event('change'));
                    }catch(e){
                        // IE 11+
                        try{
                            let evt = document.createEvent('HTMLEvents');
                            evt.initEvent('change', false, true);
                            this.element.dispatchEvent(evt);
                        }catch(e){
                            console.log(e);
                        }
                    }
                }
            });

}
}

Answer 1

我將您的代碼復制到了gist.run中，並且運行良好： https ://gist.run/?id=5b560eac6deff0f1b0896c30a3f12f79

唯一的區別是我從CDN而不是捆綁包中加載jQuery和select2。 您可以在這里看到它對我有用的GIF： http : //imgur.com/a/6uSs6