选择2无限滚动组

Question

所以这是一个有趣的情况，我还没有找到任何解决方案，我想知道它是否可能。我想有一个无限滚动(分页)的select2框，但我希望能够分组的结果。我知道的一件事是，我不需要向尚未完成的组中插入数据。下面是一个用例:

一个select2框，将显示按年龄组排序的用户。我有一个12-18岁的年龄组，我只想一次拉回10个用户。如何将这些用户添加到12-18岁年龄组?

Answer 1

您没有为您的问题添加示例代码，因此我提供了一般解决方案。

首先，你必须创建一个json答案和子元素，你必须按组排序。这意味着在答案中，第一组不能在第二组之后出现。

第1页:

{
  "items": [
    {
      "text": "Group1",
      "children": [
        {
          "id": 1123,
          "text": "opt 1/1"
        },
        {
          "id": 1234,
          "text": "opt 1/2"
        },
        {
          "id": 1345,
          "text": "opt 1/3"
        }
      ]
    }
  ],
  "total": 963
}

2页

{
  "items": [
    {
      "text": "Group1",
      "children": [
        {
          "id": 1456,
          "text": "opt 1/4"
        },
        {
          "id": 1567,
          "text": "opt 1/5"
        }
      ]
    },
    {
      "text": "Group2",
      "children": [
        {
          "id": 2123,
          "text": "opt 2/1"
        }
      ]
    }
  ],
  "total": 963
}

第三页

{
  "items": [
    {
      "text": "Group2",
      "children": [
        {
          "id": 2234,
          "text": "opt 2/2"
        },
        {
          "id": 2345,
          "text": "opt 2/3"
        },
        {
          "id": 2456,
          "text": "opt 2/4"
        }
      ]
    }
  ],
  "total": 963
}

第二，你需要从下拉菜单中删除重复的optgroup。

可以使用templateResult选项自定义下拉框(选项和optgroups)中搜索结果的外观。我用这个选项删除了重复的optgroups和label。

$(document).ready(function() {
    $('#mySelect2').select2({
        templateResult: formatOptions,
        ajax: {
            url: 'https://api.github.com/search/repositories',
            data: function (params) {
                // Query parameters will be ?search=[term]&page=[page]
                return {
                    search: params.term,
                    page: params.page || 1
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;
                return {
                    results:    data.items,
                    pagination: {
                        more: (params.page * self.options.limit) < data.total
                    }
                };
            }
        }
    });
    function formatOptions(item, container, $el) {
        // optgroups section
        if (item.children && item.children.length > 0) {
            // don't format the repeated optgroups!
            if ($(".select2-results__group").text() === item.text) {
                return;
            }
            if ($('[aria-label="' + item.text + '"]').length > 0) {
                return;
            }
            // the first occasion of the given optgroup
            return $el;
        }
        // options section
        // here you can implement your own logic if you want to customise the output of the options
        $el.addClass('something-special-result result');
        return $el;
    }
});