web-dev-qa-db-fra.com

Select2 - utilise JSON comme données locales

Je peux le faire fonctionner ...

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

Mais je ne peux pas trouver comment arriver d'ici ...

alert (JSON.stringify (request.names)) me donne ...

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

À quelque chose que Select2 acceptera comme données locales

javascriptjqueryjquery-select2
15
ChrisG

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

La page Web de jquery-select2 avec les exemples contient une démonstration permettant d’utiliser Select2avec des données locales (un tableau).

Le 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 propriété de texte

Pour votre question, l'exemple e10_2 est pertinent

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

Pour y parvenir, vous avez besoin de la fonction format() (voir 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 - pimp my selectbox

Allusion

Pour voir le code source de chaque exemple, il est préférable d’utiliser l’onglet réseau des outils de développement de chrome et de jeter un coup d’œil sur la source html avant que javascript n’entre en action. 

20
surfmuggle

En tant que mise à jour de cet ancien message, l'utilisation de propriétés personnalisées pour l'identifiant et le texte n'est plus directement prise en charge depuis la version 4.0.0+.

Voir ici à propos du bloc de texte "Les propriétés id et text sont strictement appliquées". Vous devez créer un objet $ .map comme solution de contournement.

Encore plus, travailler avec [input type = "hidden"] est maintenant déconseillé car toutes les options de base de select2 prennent désormais en charge l'objet [select] html.

Jetez un oeil à la réponse de John S sur ce post aussi.

2
DotNetBeliever

Juste pour ajouter. Cela a également fonctionné 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));
});
2
Digitlimit