select2 4.0.0無法選擇具有遠程數據的項目

Question

我正在使用select2從REST Web服務加載數據塊。的數據被成功地加載有滾動，但它裏面的元件不能被選擇的數據被加載，但沒有選擇

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對象的數據，該數據具有「主機名」列表作爲值

Answer 1

您是從服務器返回的數據格式不很好地通過選擇2使用：選擇2預計每個值是一對ID /文本的，所以在你的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; 
}