web-dev-qa-db-fra.com

Comment charger des données JSON pour les utiliser avec le plugin select2

Je souhaite utiliser le plugin select2 pour mon projet. J'ai suivi this exemple, mais cela ne fonctionne pas pour moi.

Sortie JSON :

[
    {"ime":"BioPlex TM"},
    {"ime":"Aegis sym agrilla"},
    {"ime":"Aegis sym irriga"},
    {"ime":"Aegis sym microgranulo"},
    {"ime":"Aegis sym pastiglia"},
    {"ime":"Agroblen 15816+3MgO"},
    {"ime":"Agroblen 18816+3MgO"},
    {"ime":"Agrobor 15 HU"},
    {"ime":"Agrocal (Ca + Mg)"},
    {"ime":"Agrocal (Ca)"},
    {"ime":"Agrogold"},
    {"ime":"Agroleaf Power 12525+ME"},
    {"ime":"Agroleaf Power 151031+ME"},
    {"ime":"Agroleaf Power 202020+ME"},
    {"ime":"Agroleaf Power 311111+ME"},
    {"ime":"Agroleaf Power Ca"},
    {"ime":"Agrolution 14714+14 CaO+ME"},
    {"ime":"Agrovapno dolomitno"},
    {"ime":"Agrovit HSF"},
    {"ime":"Agrovit P"},
    {"ime":"Agrozin 32 T"},
    {"ime":"Albatros Hydro"},
    {"ime":"Albatros Sprint"},
    {"ime":"Albatros Standard"},
    {"ime":"Albatros Universal"},
    {"ime":"Algaren"},
    {"ime":"AlgoVital ? Plus"},
    {"ime":"Amalgerol PREMIUM"},
    {"ime":"Amcolon \/ Novalon"},
    {"ime":"Amcopaste"},
    {"ime":"Aminosprint N8"},
    {"ime":"AminoVital"},
    {"ime":"Ammonium nitrate 33.5%"},
    {"ime":"Ammonium nitrate with calcium sulfate"},
    {"ime":"Ammonium sulfate"}
]

Script :

function formatDjubrivo(data) {
    return data;
}
function formatDjubrivo1(data) {
    return data.ime;

$( "#inputs" ).change(function() {
    console.log('prolazi klik');
    var t = $( this ).val();
    console.log(t);
    if (t=='djubrivo') {
       console.log('prolazi klik if');
       $('#stavka').select2({
          ajax: {
             dataType : "json",
             url      : "djubrivo.php",
             results  : function (data) {
                 return {results: data};
             }
          },
          formatResult : formatDjubrivo
       });
    }else {
       console.log('nije djubrivo');
    }
});

[~ # ~] html [~ # ~] :

<div class="col-md-2" style="padding-right:0px;">
    Vrsta Inputa
    <select id="inputs" name="inputs" class="form-control js-example-responsive">
        <option value="djubrivo">djubrivo</option>
        <option value="pesticidi">pesticidi</option>
        <option value="kultura">kultura</option>
        <option value="voda">voda</option>
    </select>
</div>

<div class="col-md-2" style="padding-right:0px;">
    Stavka
    <input id="stavka" name="stavka" class="form-control js-example-responsive">
</div>

Voici le résultat lorsque je teste mon code à l'aide de console.log:

Select2: Les résultats AJAX n'ont pas renvoyé de tableau dans la clé results de la réponse.

Où ai-je fait erreur?

javascriptjqueryajaxjsonjquery-select2
14
dert detg

Il semble que vous utilisez Select2 4.0, à la fois à partir du lien que vous fournissez aux exemples et du message d'erreur que vous recevez. Cependant, votre code est écrit pour les versions précédentes de Select2.

Si vous souhaitez continuer à utiliser Select2 4.0:

(1) Modifiez l'option results ajax en processResults.

(2) Modifiez la fonction processResults pour que la propriété results de l'objet qu'elle renvoie soit un tableau d'objets, où chaque objet a un id et un text propriété. Pour cela, vous pouvez utiliser la fonction $.map() pour créer un nouveau tableau à partir de celui renvoyé par l'appel ajax.

processResults: function (data) {
    return {
        results: $.map(data, function(obj) {
            return { id: obj.ime, text: obj.ime };
        })
    };
}

Vous pouvez également vous débarrasser de l'option formatResult.

(3) Utilisez un <select> élément, au lieu d'un <input> élément.

<select id="stavka" name="stavka" class="form-control js-example-responsive"></select>

jsfiddle

55
John S

essaye ça :

$.getJSON("djubrivo.php", function (json) {
      $("#inputs").select2({
         data: json,
         width: "180px"
      });
 });

exemple json:

        {id:0,text:"enhancement"},
        {id:1,text:"bug"},
        {id:2,text:"duplicate"},
        {id:3,text:"invalid"},
        {id:4,text:"wontfix"}
2
Bruno Ribeiro