Question

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

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

Answer 1

您没有在问题中添加示例代码，因此我提供了一个通用的解决方案。

首先，您必须创建带有子元素的json答案，并且必须按组对它进行排序。这意味着答案中的Group1不能再出现在Group2之后。

第一页：

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

第二页

{
  "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选项自定义下拉菜单（选项和optgroup）中搜索结果的外观。我通过此选项删除了重复的optgroup和标签。

$(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;
    }

});

选择2无限滚动组

1 个答案: