如何加载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"} 

如果你浏览