Aurelia Select2，加载远程数据不加载下一页

Posted 2023-05-07

【中文标题】Aurelia Select2，加载远程数据不加载下一页

【英文标题】：Aurelia Select2, load remote data not loading next page

【发布时间】：2017-12-23 14:12:19

【问题描述】：

我正在尝试使用 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);
                        
                    
                
            );

【参考方案1】：

我将您的代码复制到 gist.run 中，它运行良好：https://gist.run/?id=5b560eac6deff0f1b0896c30a3f12f79

唯一的区别是我从 CDN 加载 jQuery 和 select2，而不是从包中加载。你可以在这里看到它的 GIF：http://imgur.com/a/6uSs6

【讨论】：

我使用 2.1.4 版本的 jquery 是 select2 版本 4.0.3 需要更高的 jquery 吗？

如果您将这些信息放在原始问题中会很有帮助。但无论如何，我已经更新了要使用这些版本的要点，它仍然可以正常工作：gist.run/?id=5b560eac6deff0f1b0896c30a3f12f79