Aurelia Select2, charger les données à distance sans charger la page suivante

Question

J'essaie d'utiliser Select2 et de charger des données distantes (ajax) dans Aurelia. Je crée donc un attribut personnalisé appelé Select2 et suis les options de la documentation. Mais j'ai rencontré un problème en faisant défiler jusqu'à la fin de la liste déroulante un message "charger plus de résultats" apparaît mais ne charge pas plus de données ou n'appelle pas l'API (en utilisant la même API dans la documentation Select2 pour faire bien sûr que je ne manque rien).

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

Je copiais votre code dans un gist.run et il a bien fonctionné: https://gist.run/?id=5b560eac6deff0f1b0896c30a3f12f79

La seule différence est que je suis chargement jQuery et select2 d'un CDN et non du faisceau. Vous pouvez voir un GIF de travail pour moi ici: http://imgur.com/a/6uSs6