Группа Select2 с бесконечной прокруткой

Question

Я использую опцию select2 group с бесконечной прокруткой, и данные поступают с помощью Ajax, вызывающего вызов на страницу 10. Здесь возникает некоторая проблема, предположим, что у пользователя 1 есть 15 данных, а у пользователя 2 - 15 данных, сначала 10 данных поступают от пользователя1 и на следующей странице 10 (5 данных для пользователя 1 и 5 данных для пользователя 2).Нет проблем для получения данных, но проблема в том, что группа пользователей 1 показывает двойной уровень.Как я могу предотвратить двойное отображение в моей группе опций select2?Есть ли способ снова создать группу параметров?

HTML CODE

<div class="container">
  <form id="frm">
    <h1>Solution 1</h1>
    <div class="row">
      <div class="col-4">
        <div class="form-group">
          <label for="tagInput">Get data by ajax calling</label>
          <select class="form-control" id="pictures_tag_input">
</select>
          <small class="form-text text-muted"><p class="text-info">Infinite Scroll</p></small>
        </div>
      </div>
    </div>
  </form>
</div>

JS CODE

$(document).ready(function() {
  // solution 1
  //example.com/articles?page[number]=3&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 < 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 > 0) {
          var obj1 = {
            id: node.id,
            text: node.title
          };
          rootArray[0].children.push(obj1);
        } else {
          roots.push(obj);
        }
      }
    }
    return roots;
  }
});

Демо https://codepen.io/mdshohelrana/pen/MLVZEG

Answer 1

Просто попробуйте использовать следующий код

templateResult: function(data) {
 if (typeof data.children != 'undefined') {
  $(".select2-results__group").each(function() {
   if (data.text == $(this).text()) {
    return data.text = '';
   }
  });
 }
 return data.text;
}

ПРИМЕЧАНИЕ. Нужно группировать данные со стороны сервера, в противном случае необходимо создавать основные данные со стороны клиента.

Answer 2

возможно проблема в источнике данных

Вы вызываете пользователя 1 .... сервер возвращает 1

Вы называете пользователя 2 .... сервер возвращает 1

Вы звоните пользователю 3 .... сервер возвращает 2

Вы звоните пользователю 4 .... сервер возвращает 2

Вы звоните пользователю 5 .... сервер возвращаетa 3

Вы вызываете пользователя 6 .... сервер возвращает 3

curent_user = 1;
$(document).ready(function() {
  http: $("#pictures_tag_input").select2({
    placeholder: "Search for options",
    ajax: {
      url: "https://jsonplaceholder.typicode.com/users/1/todos",
      dataType: "json",
      global: false,
      cache: false,
      minimumInputLength: 2,
      data: function(params) {
       console.log("params",params || 1);
        return {
          q: params.term, // search term
          _page: curent_user,
          _limit: 10 // page size
        };
      },

      processResults: function(data, params) {
        curent_user += 2;
        var datx = getNestedChildren(data);
        console.log("data: ", data);

        return {
          results: datx,
          pagination: {
            more: true
          }
        };
      } //end of process results
    } // end of ajax
  });

  function getNestedChildren(list) {
    var roots = [];
    for (i = 0; i < 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 > 0) {
          var obj1 = {
            id: node.id,
            text: node.title
          };
          rootArray[0].children.push(obj1);
        } else {
          roots.push(obj);
        }
      }
    }
    return roots;
  }
});

, поэтому, если вы пропустите один шаг

Вы позвоните пользователю 1 ....сервер возвращает 1

вы вызываете пользователя 3 .... сервер возвращает 2

вы вызываете пользователя 5 .... сервер возвращает 3