select2 4.0 AJAX pre-fill howto?

Question

Я уже читал this, this, this и в соответствии с документацией the most important here, но ни один из них не работает для меня. Я пытаюсь использовать AJAX select2. Я пытаюсь создать общий элемент «select».

Итак, для всех элементов, имеющих атрибут data-select2-json, я применяю select2 с URL-адресом ajax, который находится в значении data-select2-json.

$('[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({.. выше), но это не работает и дает мне пустые значения:

NB: 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

Я создал working example on jsfiddle используя пример кода, предоставленного на Select2 Examples странице. Я просто должен был изменить их пример выбора тега, чтобы принимать множество, как у вас:

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