Come caricare i dati JSON per utilizzarlo con il plugin select2

Question

Voglio usare il plugin select2 per il mio progetto. Ho seguito l'esempio this, ma non funziona per me.

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

Questo è il Resul t quando verifico il mio codice utilizzando console.log:

Select2: I risultati AJAX non ha restituito una matrice nella chiave results della risposta.

Dove ho fatto l'errore?

Answer 1

Sembra che si stia utilizzando Select2 4.0, sia dal collegamento fornito agli esempi che dal messaggio di errore che si sta ricevendo. Il tuo codice, tuttavia, è scritto per le versioni precedenti di Select2.

Se si desidera continuare a utilizzare Select2 4.0:

(1) Variazione l'opzione results Ajax per processResults.

(2) cambia la funzione processResults pertanto la proprietà dell'oggetto restituisce results è un array di oggetti, dove ogni oggetto ha un id e una proprietà text. Un modo per farlo è utilizzare la funzione $.map() per creare un nuovo array da quello restituito dalla chiamata ajax.

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

È inoltre possibile sbarazzarsi dell'opzione formatResult.

(3) Utilizzare un elemento <select> anziché un elemento <input>.

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

jsfiddle

Answer 2

provare questo:

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

esempio JSON:

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