select2 4.0 AJAX pre-fill Anleitung?

Question

Ich habe bereits gelesen this, this, this und entsprechend der Dokumentation the most important here, aber keiner von ihnen funktioniert für mich. Ich versuche AJAX select2 zu verwenden. Ich versuche, einen allgemeinen "Auswahl" -Eintrag zu machen.

Also für alle Elemente, die ein data-select2-json Attribut haben, wenden ich eine select2 mit der Ajax-URL, die in data-select2-json Wert ist.

$('[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 
    }); 
}); 

Es funktioniert gut!

JSON sendet der Server immer so formatiert ist:

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

Es ist sehr nah an der AJAX Probe Sie can find in the documentation. Mein Problem ist, AJAX initiatilize: Ich entweder will die Werte im HTML hinzuzufügen:

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

und dann initialisieren mit select2 (= der Code $(this).select2({.. oben), aber das funktioniert nicht und gibt mir Blindwerte:

NB: the solution here given by Kevin Brown funktioniert auch nicht und gibt mir genau das gleiche Ergebnis.

Die andere Lösung ist in AJAX auf die URL mit einem Parameter wie „&init=1“ (oder so ähnlich) so den Server zu fragen, wird die Ergebnisse mit zusätzlichen Parametern wie checked: true für jeden Wert senden, und ich werde select2 mit denen nennen Werte.

Nichts ist klar in der Dokumentation zum Vorfüllen select2. Wie soll ich es machen?

Hier sind meine andere Funktionen:

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

ich ein working example on jsfiddle mit dem Beispielcode auf der Select2 Examples Seite vorgesehen erstellt. Ich musste nur ihr Beispiel select-Tag ändern mehrere wie das Ihre akzeptieren:

<select multiple="multiple" ... 

ich auch eine zweite Standard gewählte Option hinzugefügt:

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

Wenn Sie einen Blick auf die Geige haben, werden Sie sehen, es funktioniert, wie Sie möchten, dass Ihre arbeiten.

Sie haben den Code für Ihre -Methode nicht angegeben. Ich vermute, dass diese Methode die Ursache für Ihr Problem ist.Der verwendete Code auf den Beispielen Seite lautet:

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

Obwohl ich keine Ahnung, was Ihr formatRepoSelection Code ist, glaube ich, wenn Sie es so etwas wie die folgenden zu ändern, wird das Problem gelöst werden:

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