select2 4.0.0 не может выбирать элементы с удаленными данными

Question

Я использую select2 для загрузки кусков данных из веб-службы REST. Данные успешно загружены с прокруткой, но элементы внутри него не могут быть выбраны данные загружен, но не выбран

HTML:

<div class="row"> 
    <select id="test" style="width: 300px" /> 
</div> 

JavaScript:

$("#test").select2({ 
    ajax: { 
     url: "URL", 
     dataType: 'json', 
     delay: 250, 
     data: function(params) { 
      return { 
       searchTerm: params.term, // search term 
       page: params.page 
      }; 
     }, 
     processResults: function(data, params) { 
      params.page = params.page || 0; 
      return { 
       results: data.content, 
       pagination: { 
        more: (1 + params.page) < data.totalPages 
       } 
      }; 
     }, 
     cache: true 
    }, 
    allowClear: true, 
    escapeMarkup: function(markup) { 
     return markup; 
    }, 
    multiple: true, 
    maximumSelectionLength: 22, 
    placeholder: "Select fruits...", 
    templateResult: formatRepo, 
    templateSelection: formatRepoSelection 
}); 

function formatRepoSelection(data) { 
    return data.hostname; 
} 

function formatRepo(data) { 
    if (data.loading) return data.text; 
    var markup = "<option value='"+data.hostname+"'>" + data.hostname + "</option>" 
    return markup; 
} 

этого выходные данные, которые являются объектами json с одним атрибутом «content», который имеет список «имя хоста» как значение

Answer 1

Данные, возвращается с сервера не очень хорошо отформатирован для использования выбор2: Выбор2 ожидает, каждое значение будет паром ид/текст, так что в вашем processResults вам нужно отформатировать результат, а также вас необходимо изменить два рендеринга функции, основанные на том, что параметр данных будет содержать два атрибута ID и TEXT:

$("#test").select2({ 
    ajax: { 
     url: "URL", 
     dataType: 'json', 
     delay: 250, 
     data: function(params) { 
      return { 
       searchTerm: params.term, // search term 
       page: params.page 
      }; 
     }, 
     processResults: function(data, params) { 
      var d = []; 

      for (var i = data.length - 1; i >= 0; i--) { 
       d.push({ 
       id: data[i].hostname, 
       text: data[i].hostname 
       }); 
      } 

      params.page = params.page || 0; 
      return { 
       results: d, 
       pagination: { 
        more: (1 + params.page) < data.totalPages 
       } 
      }; 
     }, 
     cache: true 
    }, 
    allowClear: true, 
    escapeMarkup: function(markup) { 
     return markup; 
    }, 
    multiple: true, 
    maximumSelectionLength: 22, 
    placeholder: "Select fruits...", 
    templateResult: formatRepo, 
    templateSelection: formatRepoSelection 
}); 

function formatRepoSelection(data) { 
    return data.text; 
} 

function formatRepo(data) { 
    if (data.loading) return data.text; 

    return data.text; 
}