如何加載JSON數據以與select2插件一起使用

Question

我想爲我的項目使用select2插件。我跟着this的例子，但它不適合我。

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"} 
] 

腳本：

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> 

這是resul T當我使用console.log測試我的代碼：

選擇二：Ajax的結果沒有在響應的results鍵返回數組。

我在哪裏犯錯？

Answer 1

看起來您使用的是Select2 4.0，它們都來自您提供給示例的鏈接以及您收到的錯誤消息。但是，您的代碼是爲先前版本的Select2編寫的。

如果你想繼續使用選擇二4.0：

（1）results AJAX選項更改爲processResults。

（2），所以它返回對象的results屬性是對象的數組，其中每個對象具有一個id和text屬性更改processResults功能。一種方法是使用$.map()函數來創建一個由ajax調用返回的數組。

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

您還可以擺脫formatResult選項。

（3）使用<select>元素，而不是<input>元素。

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

jsfiddle

Answer 2

試試這個：

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

例如JSON：

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

如果你瀏覽