select2 4.0 AJAX預填充howto？

Question

我已閱讀this,this,this並根據文檔the most important here，但他們都沒有爲我工作。 我正在嘗試使用AJAX select2。我試圖做一個通用的「選擇」項目。

因此，對於所有具有data-select2-json屬性的元素，我應用select2以及data-select2-json值中的ajax URL。

$('[data-select2-json!=""][data-select2-json]').each(function() { 
    var url = $(this).attr('data-select2-json'); 
    var pg_size = $(this).attr('data-select2-page-size') | 30; 
    $(this).select2({ 
     language: language_code, 
     tokenSeparators: [',', ' '], 
     ajax: { 
      url: url, 
      dataType: 'json', 
      delay: 300, 
      data: function (params) { 
       return { 
        q: params.term, // -> q=[search term] 
        page: params.page // -> page=[no page] 
       }; 
      }, 
      processResults: function (data, params) { 
       params.page = params.page || 1; 
       console.log(data.items); 
       return { 
        results: data.items, 
        pagination: { 
         more: (params.page * pg_size) < data.total 
        } 
       }; 
      }, 
      cache: true 
     }, 
     // let our custom formatter work 
     escapeMarkup: function (markup) { return markup; }, 
     minimumInputLength: 1, 
     templateResult: formatRepo, 
     templateSelection: formatRepoSelection 
    }); 
}); 

它運作良好！

JSON服務器發送總是格式如下：

{"items": 
    [{"item": "Fran\u00e7ais", "id": 1}, 
    {"item": "Finlandais", "id": 5}, 
    {"item": "Chinois simplifi\u00e9", "id": 15} 
    ], 
"total": 3} 

這是非常接近的AJAX樣品你can find in the documentation。我的問題是AJAX initiatilize：我想要麼增加值在HTML：

<select multiple="multiple" class="form-control" 
     data-select2-json="/fr/chez-moi/tags/langues" 
     multiple="multiple" 
     name="known_languages"> 
    <option value="1" selected="selected">Français</option> 
    <option value="2" selected="selected">Chinois simplifié</option> 
</select> 

，然後用選擇2初始化（=上面的代碼$(this).select2({..），但是這並不工作，並給了我空白值：

注意：the solution here given by Kevin Brown也不起作用，並給我完全相同的結果。

另一種方案是在AJAX問到URL中包含「&init=1」（或類似的東西），所以服務器將發送結果與添加參數，如checked: true每個值的參數，我會叫select2與值。

關於如何預先填寫select2的文檔中沒有明確說明。我應該怎麼做？

這裏是我的其他功能：

function item_or_text(obj) { 
    if (typeof(obj.item)!='undefined') { 
     return (obj.item.length ? obj.item : obj.text); 
    } 
    return obj.text; 
} 

function formatRepo(data) { 
    if (data.loading) return data.text; 
    var markup = item_or_text(data); 
    console.log('formatRepo', data, markup); 
    return markup; 
} 

function formatRepoSelection(item) { 
    var retour = item_or_text(item); 
    console.log('formatRepoSelection', item, item.item, retour); 
    return retour; 
} 

Answer 1

我使用所提供的Select2 Examples頁面上的示例代碼創建一個working example on jsfiddle。我只是不得不改變他們的榜樣選擇標籤接受多個像您一樣的：

<select multiple="multiple" ... 

我還添加了第二默認選擇的選項：

<option value="3620194" selected="selected">select2/select2</option> 
<option value="317757" selected="selected">Modernizr/Modernizr</option> 

如果你看一下小提琴，你會看到它工作如何你想你的工作。

您沒有包含templateSelection: formatRepoSelection方法的代碼。我的猜測是這種方法是你問題的原因。示例頁面上使用的代碼是：

function formatRepoSelection(repo) { 
    return repo.full_name || repo.text; 
} 

雖然我不知道你的formatRepoSelection代碼是什麼，我想，如果你把它更改爲類似以下，您的問題將得到解決：

function formatRepoSelection(repo) { 
    return repo.item; 
}