Comment charger des données JSON à utiliser avec select2 plugin

Je veux utiliser select2 plugin pour mon projet. J'ai suivi cette exemple, mais il 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>

C'est le résultat quand je test mon code à l'aide de console.log:

Select2: L'AJAX résultats n'ont pas retourner un tableau dans le results clé de la réponse.

Où ai-je fait une erreur?

si vous parcourez djubrivo.php vous obtenez le tableau json?
oui, offcource-je obtenir ce JSON: [{"ime":"BioPlex TM"},{"ime":"Égide sym agrilla"},{"ime":"Égide sym irriga"},{"ime":"Égide sym microgranulo"},{"ime":"Égide 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 Puissance 12525+MOI"},{"ime":"Agroleaf Puissance 151031+MOI"},{"ime":"Agroleaf Puissance 202020+MOI"},{"ime":"Agroleaf Puissance 311111+MOI"} etc. ... ...
quelque chose a été changé à partir de la version 3.4.2 parce que là, je peux charger JSON de la même manière, mais maintenant, quand j'essaie la version 4.0.0 ce ne fonctionnent pas... Et mon tableau json de sortie est bien... le même que sur les docs

OriginalL'auteur dert detg | 2015-02-05

48

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

Si vous souhaitez continuer à utiliser Select2 4.0:

(1) Changement de la results ajax option pour processResults.

(2) Modification de la processResults fonction de sorte que le results propriété de l'objet qu'elle renvoie un tableau d'objets, où chaque objet a une id et un text de la propriété. Une façon de le faire est d'utiliser la $.map() fonction pour créer un nouveau tableau à partir de celui qui est retourné 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 la formatResult option.

(3) l'Utilisation d'un <select> élément, au lieu d'une <input> élément.
```
<select id="stavka" name="stavka" class="form-control js-example-responsive"></select>
```
jsfiddle

merci maintenant, POURQUOI je ne peux UTILISER le CHAMP de RECHERCHE, quand je clique sur select2 champ ? Je ne peux pas taper quoi que ce soit
Entendez-vous dans le jsfiddle? Vous pouvez taper dans le champ de recherche dans le jsfiddle, mais sa valeur n'est pas utilisée.
non, à mon projet localhost, je ne peux pas utiliser les moteurs de recherche de terrain dans select2... pourquoi? Peut-être parce que sa en modal bootstrap fenêtre ???
Je ne vois rien dans le code dans votre question vous empêcher de taper dans le champ de recherche. Vous n'êtes pas en passant la valeur du champ de recherche dans votre requête ajax, donc le champ de recherche n'est pas utilisé dans votre code.
MERCI POUR L'AIDE! ok, comment je peux faire? ne select2 ont construit en fonction pour ça?

OriginalL'auteur John S
2

essayez ceci :
```
$.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"}
```
Ce n'est pas ce que l'OP a demandé. Vous faites une demande de mise en cache et les résultats. Si un nouveau djubrivo est créé après votre demande, il ne sera pas présent dans le select.
oui, mais c'est utile si l'ajax pour charger la liste complète.. pas lors de la frappe et le code fonctionne très bien pour cela

OriginalL'auteur Bruno Ribeiro

Vous devez vous connecter pour publier un commentaire.