select2用ajax加載設置初始值，並自定義模板

Question

我嘗試了很多東西。 我不能初始化默認選擇的項目。 值始終爲「未定義」。

任何人都可以幫我嗎？

我創建了de select2，並添加了select選項。

var selected = [{ 
    "id": 50270924, 
    "full_name": "zquestz/s", 
    "description": "Open a web search in your terminal.", 
    "language": "Go" 
     }, { 
    "id": 30494317, 
    "full_name": "haosdent/s", 
    "description": "s is a tool for ssh like z for cd",  
    "language": "Shell" 
    }]; 

var $gitElement = $(".select2").select2({ 
    ajax: { 
    url: "https://api.github.com/search/repositories", 
    dataType: 'json', 
    delay: 250, 
    data: function (params) { 
     return { 
     q: params.term, 
     page: params.page 
     }; 
    }, 
    processResults: function (data, page) { 
     return { 
     results: data.items 
     }; 
    }, 
    cache: true 
    }, 
    data:selected, 
    escapeMarkup: function (markup) { return markup; }, 
    minimumInputLength: 1, 
    templateResult: function(repo) { 
    console.log("res", repo, this); 
    return '<div class="select2CompanyName">'+repo.full_name+'</div>' + 
      '<div class="select2CompanyTitle">'+repo.language+'</div>' + 
      '<div class="select2CompanyTitle">'+repo.description+'</div>'; 
    }, 
    templateSelection: function(repo) { 
    console.log("sel", repo, this); 
    return '<div class="select2CompanyResult">' + 
     '<div class="select2CompanyName">'+repo.full_name+' <br>'+ repo.language +'</div>' + 
     '<i class="fa fa-pencil-square-o"></i>' + 
      '</div>'; 
    } 
}); 

for(var i in selected) { 
    $(".select2").append('<option value="'+selected[i].id+'" selected="selected"></option>'); 
} 

$(".select2").trigger("change"); 

這個版本： jsfiddle

醜陋的解決辦法是：

for(var i in selected) { 
    $(".select2").append('<option value="'+selected[i].id+'" selected="selected">'+JSON.stringify(selected[i])+'</option>'); 
} 

here 工作，但醜陋

Answer 1

那裏有一個簡單的方法來解決它，U剛需將模板邏輯移動到processResults，代碼應該是這樣的：

function displayItem(repo) { 
return { 
    id : repo.id, 
    text : '<div class="select2CompanyName">'+repo.full_name+'</div>' + 
     '<div class="select2CompanyTitle">'+repo.language+'</div>' + 
     '<div class="select2CompanyTitle">'+repo.description+'</div>' 
}; 
} 

.... 

processResults: function (data, page) { 
     return { 
     results: $.map(data.items, displayItem); 
     }; 
    }, 

花費我有時找到問題..我升級select2版本到4.0.2。檢查小提琴here