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，加载远程数据不加载下一页

回答

相关问题