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

我想在Aurelia中使用Select2並加載遠程數據（ajax）。所以我創建了一個名爲Select2的自定義屬性，並按照文檔中的選項進行操作。Aurelia 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); 
         } 
        } 
       } 
      }); 

} 
}

來源

2017-07-18 Mary Alfred

我複製你的代碼到gist.run，它工作得很好：https://gist.run/?id=5b560eac6deff0f1b0896c30a3f12f79

唯一的區別是，我從CDN加載jQuery和選擇2，而不是從包。你可以在這裏看到它爲我工作的GIF：http://imgur.com/a/6uSs6

來源

2017-07-19 00:50:14

我使用jQuery的版本2.1.4是select2的版本4.0.3需要更高的jQuery？ –

如果您將這些信息放在原始問題中，將會很有幫助。但無論如何，我已經更新了使用這些版本的要點，它仍然正常工作：https://gist.run/?id=5b560eac6deff0f1b0896c30a3f12f79 –

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

回答

相關問題