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; 
}