如何在没有ajax的select2 4.0中启用无限滚动 [英] How to enable infinite scrolling in select2 4.0 without ajax

问题描述

我使用自定义数据适配器 select2 。提供给 select2 的所有数据都是在网页中本地生成的（因此不需要使用ajax）。由于查询方法可以生成很多结果（约5k），打开选择框的速度相当慢。

I am using select2 with custom data adapter. All of the data provided to select2 is generated locally in web page (so no need to use ajax). As query method can generate a lot of results (about 5k) opening select box is quite slow.

作为补救措施，我想使用无限滚动。自定义数据适配器的文档说查询方法应该接收 page 参数以及 term ：

As a remedy, I wanted to use infinite scroll. Documentation for custom data adapter says that query method should receive page parameter together with term:

@param params.page应加载的特定页面。这是
，通常在使用远程数据集时提供，远程数据集依靠
分页来确定应显示哪些对象。

@param params.page The specific page that should be loaded. This is typically provided when working with remote data sets, which rely on pagination to determine what objects should be displayed.

但它没有：只有 term 存在。我试图返回更多：true 或更多：1000 ，但这没有帮助。我想这是因为，默认情况下，无限滚动如果启用了ajax，则启用。

But it does not: only term is present. I tried to return more: true or more: 1000, but this didn't help. I guess this is because, by default, infinite scroll is enabled iff ajax is enabled.

我猜测启用无限滚动将涉及使用 amd.require ，但我不确定该怎么做。我试过这段代码：

I am guessing that enabling infinite scroll will involve using amd.require, but I am not sure what to do exactly. I tried this code:

$.fn.select2.amd.require(
    ["select2/utils", "select2/dropdown/infiniteScroll"],
    (Utils, InfiniteScroll) =>
      input.data("select2").options.options.resultsAdapter = 
        Utils.Decorate(input.data("select2").options.options.resultsAdapter, InfiniteScroll)
)

this是咖啡脚本，但我希望它对每个人都是可读的。 输入是 DOM 包含选择框的元素 - 我之前做过 input.select2（// options ）

This is coffee script, but I hope that it is readable for everyone. input is DOM element containing select box - I earlier did input.select2( //options )

我的问题基本上是，如何在没有 ajax 的情况下启用无限滚动？

My question is basically, how do I enable infinite scroll without ajax?

推荐答案

Select2 只会启用无限滚动，如果 ajax 已启用。幸运的是，我们可以启用它并仍然使用我们自己的适配器。所以将空对象放入 ajax 选项就可以了。

Select2 will only enable infinite scroll, if ajax is enabled. Fortunately we can enable it and still use our own adapter. So putting empty object into ajax option will do the trick.

$("select").select2({
  ajax: {},
  dataAdapter: CustomData
});

接下来，定义您自己的数据适配器。在它内部，旅馆查询将分页信息推送到回调中。

Next, define your own data adapter. Inside it, inn query push pagination info into callback.

    CustomData.prototype.query = function (params, callback) {
        if (!("page" in params)) {
            params.page = 1;
        }
        var data = {};
        # you probably want to do some filtering, basing on params.term
        data.results = items.slice((params.page - 1) * pageSize, params.page * pageSize);
        data.pagination = {};
        data.pagination.more = params.page * pageSize < items.length;
        callback(data);
    };

这是完整小提琴

这篇关于如何在没有ajax的select2 4.0中启用无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！