title: Select2 group with Infinite scroll
body: <p>I am using select2 group option with infinite scroll and data are coming by Ajax calling per page 10. Here is some problem arises, suppose user 1 has 15 data and user 2 has 15 data, at first 10 data are coming from user 1 and in next page 10 (5 data for user1 and 5 data for user2). no problem for data getting but the problem is user 1 group showing double. How can I prevent double display to my select2 options group? Has there any way to make an option group again?</p>
  
  <p><strong>HTML CODE</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;form id="frm"&gt;
      &lt;h1&gt;Solution 1&lt;/h1&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-4"&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="tagInput"&gt;Get data by ajax calling&lt;/label&gt;
            &lt;select class="form-control" id="pictures_tag_input"&gt;
  &lt;/select&gt;
            &lt;small class="form-text text-muted"&gt;&lt;p class="text-info"&gt;Infinite Scroll&lt;/p&gt;&lt;/small&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS CODE</strong></p>
  
  <pre><code>$(document).ready(function() {
    // solution 1
    //example.com/articles?page[number]=3&amp;page[size]=1
    http: $("#pictures_tag_input").select2({
      placeholder: "Search for options",
      ajax: {
        url: "https://jsonplaceholder.typicode.com/users/1/todos",
        dataType: "json",
        global: false,
        cache: true,
        delay: 250,
        minimumInputLength: 2,
        data: function(params) {
          // console.log(params.page || 1);
          return {
            q: params.term, // search term
            _page: params.page || 1,
            _limit: 10 // page size
          };
        },
        processResults: function(data, params) {
          params.page = params.page || 1;
          var datx = getNestedChildren(data);
          // console.log(datx);
  
          return {
            results: datx,
            pagination: {
              more: true
            }
          };
        } //end of process results
      } // end of ajax
    });
  
    function getNestedChildren(list) {
      var roots = [];
      for (i = 0; i &lt; list.length; i += 1) {
        node = list[i];
  
        if (roots.length === 0) {
          var obj = {
            text: "User " + node.userId,
            children: [{ id: node.id, text: node.title }]
          };
          roots.push(obj);
        } else {
          var obj = {
            text: "User " + node.userId,
            children: [{ id: node.id, text: node.title }]
          };
          var rootArray = $.map(roots, function(val, i) {
            var vl = "User " + node.userId;
            if (val.text === vl) return val;
            else return undefined;
          });
          if (rootArray.length &gt; 0) {
            var obj1 = {
              id: node.id,
              text: node.title
            };
            rootArray[0].children.push(obj1);
          } else {
            roots.push(obj);
          }
        }
      }
      return roots;
    }
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/P3JOF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P3JOF.png" alt="enter image description here"></a></p>
  
  <p><a href="https://codepen.io/mdshohelrana/pen/MLVZEG" rel="nofollow noreferrer">Demo</a>
  <a href="https://codepen.io/mdshohelrana/pen/MLVZEG" rel="nofollow noreferrer">https://codepen.io/mdshohelrana/pen/MLVZEG</a></p>