Merge options under <optgroup> when possible

I have a grouped select2 list that uses pagination to load 30 list items at a time. Each <optgroup> contains one or more <option> list items.

Feature request: an option group can cross the boundary of 30 items. When this happens, groups with the same labels at the page boundaries should be merged.

Example

optgroup group 1 contains 31 options, AJAX page size is 30.

AJAX Page 1

{
  "results" : [
    { 
      "text" : "group 1"
      "children" : [
        {
          "id" : "item1"
          "text" : "first item"
        },
        {
          "id" : "item2"
          "text" : "second item"
        },
        // items 3 to 29 omitted for brevity
        {
          "id" : "item30"
          "text" : "thirtied item"
        }
      ]
    }
  ]
  "pagination" : {
    "more" : true
  }
}

AJAX Page 2

{
  "results" : [
    { 
      "text" : "group 1"
      "children" : [
        {
          "id" : "item31"
          "text" : "thirty-first item"
        }
      ]
    }
  ]
  "pagination" : {
    "more" : false
  }
}

Expected result

The code should recognize that page 2 should be merged with page 1 instead of appended, because the group header is the same.

<optgroup label="group 1">
    <option value="item1">first item</option>
    <option value="item2">second item</option>
    <!--  items 3 to 29 omitted for brevity -->
    <option value="item30">thirtied item</option>
    <option value="item31">thirty-first item</option>
</optgroup>

Actual result

<optgroup label="group 1">
    <option value="item1">first item</option>
    <option value="item2">second item</option>
    <!--  items 3 to 29 omitted for brevity -->
    <option value="item30">thirtied item</option>
</optgroup>
<optgroup label="group 1">
    <option value="item31">thirty-first item</option>
</optgroup>

[SandovalDanilo]

Any chance to update the main project to implement this feature?

[Discartyptics]

This is a feature I’d love to have, since I deal with a lot of data and sometimes that data is grouped.

For anybody else finding this thread via Google, here’s a small example of how I was able to achieve a similar feature. This code manipulates the returned server data, replacing “duplicate” groups with their children. (Alternatively, you could also send the “latestGroup” variable to the server and check the group on the server-level.)

Feel free to use however you want, no credit needed.

let latestGroup;
$(dropdown).select2({
    ...
    ajax: {
        ...
        processResults: (data,params) => {
            const oldResults = data["results"];
            let newResults;
            if (oldResults.length > 0) {
                if (latestGroup !== undefined) {
                    newResults = [];
                    Array.from(oldResults).forEach(result => {
                        if (result["children"] !== undefined && result["text"].trim().toUpperCase() === latestGroup.trim().toUpperCase()) {
                            Array.from(result["children"]).forEach(child => {
                                newResults.push(child);
                            });
                        } else {
                            newResults.push(result);
                        }
                    });
                } else {
                    newResults = oldResults;
                }
                Array.from(oldResults).forEach(result => {
                    if (result["children"] !== undefined) {
                        latestGroup = result["text"];
                    } 
                });
            } else {
                newResults = oldResults;
            }
            return {
                results: newResults,
                ...
            };    
        }
    }
});