Select2 - 无限滚动无法加载下一页与远程数据

Question

我使用Select2 4.0.1，我已经使用ajax填充基于用户输入的结果，但每当我搜索任何东西select2列出第一页结果，但连续页面未加载，也请求第2页滚动。似乎是我失去了一些东西。

$multiselect = $(element).select2({ 
    closeOnSelect: false, 
    multiple: true, 
    placeholder: 'Assign a new tag', 
    tags: true, 
    tokenSeparators: [","], 
    ajax: { 
     url: '/search_url', 
     dataType: 'json', 
     type: 'GET', 
     delay: 250, 
     data: function(params) { 
     return { 
      search: params.term, 
      page: params.page 
     }; 
     }, 
     processResults: function(data, params) { 
     var more, new_data; 
     params.page = params.page || 1; 
     more = { 
      more: (params.page * 20) < data.total_count 
     }; 
     new_data = []; 
     data.items.forEach(function(i, item) { 
      new_data.push({ 
      id: i.name, 
      text: i.name 
      }); 
     }); 
     return { 
      pagination: more, 
      results: new_data 
     }; 
     }, 
     cache: true 
    } 
    }) 

任何帮助是非常appreciated.Thnx :)

Answer 1

这是我的工作，上周的代码。我在我的最后使用了不同的交通工具，但这不应该有所作为。关于滚动时无法进行分页工作，我遇到了同样的问题。我的问题最终是因为我的processResults函数中没有正确的{'pagination':{'more':true}}格式。我能看到的唯一的东西可能对你有用，就是“修复”data功能与processResults功能的页数。

当您滚动到列表底部时，是否看到“加载更多结果...”标签？您是否在调试时尝试将more值硬编码为true？

 this.$(".select2").select2({ 
      'ajax': { 
       'transport': function (params, success, failure) { 
        var page = (params.data && params.data.page) || 1; 
        app.do('entity:list:search',{'types':['locations'],'branch':branch,'limit':100,'page':page,'term':params.data.term}) 
        .done(function(locations) { 
         success({'results':locations,'more':(locations.length>=100)}); 
        }); 
       } 
       , 'delay': 250 
       , 'data':function (params) { 
        var query = { 
         'term': params.term 
         , 'page': params.page || 1 
        }; 

        return query; 
       } 
       , 'processResults': function (data) { 
        return { 
         'results': data.results 
         , 'pagination': { 
          'more': data.more 
         } 
        }; 
       } 
      } 
      , 'templateResult': that.formatResult 
      , 'templateSelection': that.formatSelection 
      , 'escapeMarkup': function(m) { return m; } 
     });