Select2 - utilise JSON comme données locales

Je peux obtenir que cela fonctionne...

var options = [{id: 1, text: 'Adair, Charles'}]  
$('#names').select2({
    data: options,
})

Mais je ne peux pas travailler sur la façon d'obtenir à partir d'ici...

d'alerte(JSON.stringify(requête.les noms)) me donne...

[{"id":"1","name":"Adair,James"},
{"id":"2","name":"Anderson,Peter"},
{"id":"3","name":"Armstrong,Ryan"}]

À quelque chose qui Select2 accepte que les données locales

source d'informationauteur ChrisG | 2013-08-10

  1. 18

    Charger des données à partir d'un local de tableau

    Le site de jquery-select2 avec l'exemple contient une démonstration de l'utilisation Select2 avec les données locales (un tableau).

    Le code html

    <input type="hidden" id="e10" style="width:300px"/>

    Le javascript

    $(document).ready(function() { 

    var sampleArray = [{id:0,text:'enhancement'}, {id:1,text:'bug'}
                       ,{id:2,text:'duplicate'},{id:3,text:'invalid'}
                       ,{id:4,text:'wontfix'}];

    $("#e10").select2({ data: sampleArray });

});

    Select2 charger des données si le tableau n'a pas de texte de propriété

    Pour ta question, l'exemple e10_2 est pertinent

    <input type="hidden" id="e10_2" style="width:300px"/>

    À réaliser que vous avez besoin de la fonction format() comme on le voit ci-dessous: 

    $(document).ready(function() { 

    //tell Select2 to use the property name for the text
    function format(item) { return item.name; };

    var names = [{"id":"1","name":"Adair,James"}
             , {"id":"2","name":"Anderson,Peter"}
             , {"id":"3","name":"Armstrong,Ryan"}]

    $("#e10_2").select2({
            data:{ results: names, text: 'name' },
            formatSelection: format,
            formatResult: format                        
    });

});

    C'est la sortie:

    Select2 - utilise JSON comme données locales

    Soupçon

    Pour voir le code source de chaque exemple, il est préférable d'utiliser le réseau de l'onglet de google chrome dev tools et de prendre un coup d'oeil de la source html avant de javascript coups de pied dans.

  2. 2

    Comme une mise à jour pour cet ancien relais de poste, ayant des propriétés personnalisées pour les id et le texte n'est pas directement pris en charge plus depuis 4.0.0+ version.

    Voir ici sur "L'id et les propriétés du texte sont strictement appliquées" bloc de texte. Vous devez créer un $.la carte de l'objet comme une solution de contournement.

    Même plus, de travailler avec un [input type="hidden"] est maintenant obsolète comme tous les core choisir 2 options maintenant appuyer le bouton [select] objet html.

    Ont un coup d'oeil à John S' réponse sur ce post.

  3. 0

    Juste à ajouter. Cela a également travaillé pour moi:

    HTML:

    <select id="names" name="names" class="form-control"></select>

    Javascript

    $('#names').select2();

var options = $('#names');

$.each(sampleArray, function() {
    options.append($("<option />").val(this.id).text(this.name));
});