如何在没有 ajax 的 select2 4.0 中启用无限滚动

Question

我正在使用带有自定义数据适配器的select2。提供给select2 的所有数据都是在网页本地生成的（因此无需使用ajax）。由于query 方法可以生成很多结果（大约 5k）打开选择框很慢。

作为补救措施，我想使用无限滚动。自定义数据适配器的Documentation 表示query 方法应该接收page 参数和term：

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

但它没有：只有term 存在。我试图返回more: true 或more: 1000，但这并没有帮助。我猜这是因为默认情况下infinite scroll is enabled iff ajax is enabled。

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

$.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)
)

这是咖啡脚本，但我希望每个人都可以阅读。 input 是包含选择框的 DOM 元素 - 我之前做过 input.select2( //options )

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

Answer 1

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

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

接下来，定义您自己的数据适配器。在其中，inn query 将 pagination 信息推送到回调中。

    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);
    };

这是full fiddle

Answer 2

扩展 this answer 以展示如何保留 select2 附带的搜索功能。谢谢Paperback Writer！

还参考了this example 如何使用客户端数据源实现无限滚动，select2 版本为 3.4.5。

此示例使用 select 标记中的原始选项来构建列表，而不是在我的情况下需要的项目数组。

function contains(str1, str2) {
    return new RegExp(str2, "i").test(str1);
}

CustomData.prototype.query = function (params, callback) {
    if (!("page" in params)) {
        params.page = 1;
    }
    var pageSize = 50;
    var results = this.$element.children().map(function(i, elem) {
        if (contains(elem.innerText, params.term)) {
            return {
                id:[elem.innerText, i].join(""),
                text:elem.innerText
            };
        }
    });
    callback({
        results:results.slice((params.page - 1) * pageSize, params.page * pageSize),
        pagination:{
            more:results.length >= params.page * pageSize
        }
    });
};

这是jsfiddle

Answer 3

我觉得上面的答案需要更好的演示。 Select2 4.0.0 introduces 能够做自定义adapters。使用 ajax: {} 技巧，我创建了一个直接使用本地 JSON 的自定义 dataAdapter jsonAdapter。另请注意 Select2 的 4.0.0 版本如何使用大 JSON 字符串获得令人印象深刻的性能。我使用了online JSON generator 并创建了 10,000 个名称作为测试数据。然而，这个例子非常混乱。虽然这可行，但我希望有更好的方法。

在这里查看完整的小提琴：http://jsfiddle.net/a8La61rL/

 $.fn.select2.amd.define('select2/data/customAdapter', ['select2/data/array', 'select2/utils'],
    function (ArrayData, Utils) {
        function CustomDataAdapter($element, options) {
            CustomDataAdapter.__super__.constructor.call(this, $element, options);
        }

        Utils.Extend(CustomDataAdapter, ArrayData);

        CustomDataAdapter.prototype.current = function (callback) {
            var found = [],
                findValue = null,
                initialValue = this.options.options.initialValue,
                selectedValue = this.$element.val(),
                jsonData = this.options.options.jsonData,
                jsonMap = this.options.options.jsonMap;

            if (initialValue !== null){
                findValue = initialValue;
                this.options.options.initialValue = null;  // <-- set null after initialized              
            }
            else if (selectedValue !== null){
                findValue = selectedValue;
            }

            if(!this.$element.prop('multiple')){
                findValue = [findValue];
                this.$element.html();     // <-- if I do this for multiple then it breaks
            }

            // Query value(s)
            for (var v = 0; v < findValue.length; v++) {              
                for (var i = 0, len = jsonData.length; i < len; i++) {
                    if (findValue[v] == jsonData[i][jsonMap.id]){
                       found.push({id: jsonData[i][jsonMap.id], text: jsonData[i][jsonMap.text]}); 
                       if(this.$element.find("option[value='" + findValue[v] + "']").length == 0) {
                           this.$element.append(new Option(jsonData[i][jsonMap.text], jsonData[i][jsonMap.id]));
                       }
                       break;   
                    }
                }
            }

            // Set found matches as selected
            this.$element.find("option").prop("selected", false).removeAttr("selected");            
            for (var v = 0; v < found.length; v++) {            
                this.$element.find("option[value='" + found[v].id + "']").prop("selected", true).attr("selected","selected");            
            }

            // If nothing was found, then set to top option (for single select)
            if (!found.length && !this.$element.prop('multiple')) {  // default to top option 
                found.push({id: jsonData[0][jsonMap.id], text: jsonData[0][jsonMap.text]}); 
                this.$element.html(new Option(jsonData[0][jsonMap.text], jsonData[0][jsonMap.id], true, true));
            }

            callback(found);
        };        

        CustomDataAdapter.prototype.query = function (params, callback) {
            if (!("page" in params)) {
                params.page = 1;
            }

            var jsonData = this.options.options.jsonData,
                pageSize = this.options.options.pageSize,
                jsonMap = this.options.options.jsonMap;

            var results = $.map(jsonData, function(obj) {
                // Search
                if(new RegExp(params.term, "i").test(obj[jsonMap.text])) {
                    return {
                        id:obj[jsonMap.id],
                        text:obj[jsonMap.text]
                    };
                }
            });

            callback({
                results:results.slice((params.page - 1) * pageSize, params.page * pageSize),
                pagination:{
                    more:results.length >= params.page * pageSize
                }
            });
        };

        return CustomDataAdapter;

    });

var jsonAdapter=$.fn.select2.amd.require('select2/data/customAdapter');

Answer 4

我发现劫持 ajax 适配器比像上面的答案那样创建一个全新的 CustomAdapter 更容易。上面的答案实际上似乎并不支持分页，因为它们都是从不支持分页的数组开始的。它也不支持延迟处理。

window.myarray = Array(10000).fill(0).map((x,i)=>'Index' + i);
    
let timer = null;
$('select[name=test]')
    .empty()
    .select2({
        ajax: {
            delay: 250,
            transport: function(params, success, failure) {
                let pageSize = 10;
                let term = (params.data.term || '').toLowerCase();
                let page = (params.data.page || 1);

                if (timer)
                    clearTimeout(timer);

                timer = setTimeout(function(){
                    timer = null;
                    let results = window.myarray // your base array here
                    .filter(function(f){
                        // your custom filtering here.
                        return f.toLowerCase().includes(term);
                    })
                    .map(function(f){
                        // your custom mapping here.
                        return { id: f, text: f}; 
                    });

                    let paged = results.slice((page -1) * pageSize, page * pageSize);

                    let options = {
                        results: paged,
                        pagination: {
                            more: results.length >= page * pageSize
                        }
                    };
                    success(options);
                }, params.delay);
            }
        },
        tags: true
    });

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.full.min.js"></script>
<select name='test' data-width="500px"><option>test</option></select>

Answer 5

我对 Angular 9 的解决方案

  this.$select2 = this.$element.select2({
    width: '100%',
    language: "tr",
    ajax: {
      transport: (params, success, failure) => {
        let pageSize = 10;
        let page = (params.data.page || 1);
        let results = this.options
          .filter(i => new RegExp(params.data.term, "i").test(i.text))
          .map(i => {
            return {
              id: i.value,
              text: i.text
            }
          });
        let paged = results.slice((page - 1) * pageSize, page * pageSize);

        let options = {
          results: paged,
          pagination: {
            more: results.length >= page * pageSize
          }
        };
        success(options);
      }
    }
  });
}

Answer 6

这是一个 更短，可搜索的 Select2 v4 版本，具有分页功能。它使用lo-dash 搜索。

编辑新小提琴：http://jsfiddle.net/nea053tw/

$(function () {
    items = []
    for (var i = 0; i < 1000; i++) {
        items.push({ id: i, text : "item " + i})
    }

    pageSize = 50

    jQuery.fn.select2.amd.require(["select2/data/array", "select2/utils"],

    function (ArrayData, Utils) {
        function CustomData($element, options) {
            CustomData.__super__.constructor.call(this, $element, options);
        }
        Utils.Extend(CustomData, ArrayData);

        CustomData.prototype.query = function (params, callback) {

            var results = [];
            if (params.term && params.term !== '') {
              results = _.filter(items, function(e) {
                return e.text.toUpperCase().indexOf(params.term.toUpperCase()) >= 0;
              });
            } else {
              results = items;
            }

            if (!("page" in params)) {
                params.page = 1;
            }
            var data = {};
            data.results = results.slice((params.page - 1) * pageSize, params.page * pageSize);
            data.pagination = {};
            data.pagination.more = params.page * pageSize < results.length;
            callback(data);
        };

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

搜索循环最初来自这些旧的 Select4 v3 函数：https://stackoverflow.com/a/25466453/5601169

Answer 7

这不是一个直接的答案：在为此苦苦挣扎了一段时间后，我最终切换到了 selectize。从版本 4 开始，Select2 对非 Ajax 搜索的支持非常复杂，近乎荒谬，并且没有很好地记录。 Selectize 明确支持非 Ajax 搜索：您只需实现一个返回列表的函数。

Answer 8

这些都不适合我。我不知道最初的问题是什么意思，但就我而言，我正在使用角度和 HTTP 调用和服务，并希望避免 AJAX 调用。 所以我只是想调用一个服务方法来代替 AJAX。这甚至没有记录在图书馆的网站上，但不知何故我找到了使用transport

的方法

ajax: {
        delay : 2000,
        transport: (params, success, failure) => {
          this.getFilterList(params).then(res => success(res)).catch(err => failure(err));
        }
      }

如果有像我这样的人为此而来，那就去吧！