JSON 데이터를 로드하여 select2 플러그인과 함께 사용하는 방법

JSON 데이터를 로드하여 select2 플러그인과 함께 사용하는 방법

프로젝트에 select2 plugin을 사용하고 싶습니다.저는 이 예를 따랐지만, 저에게는 통하지 않습니다.

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>

이것은 내가 코드를 사용해서 테스트했을 때의 결과입니다.console.log:

선택2:AJAX 결과가 에 배열을 반환하지 않았습니다.results응답의 키입니다.

제가 어디서 실수를 했나요?

예제에 제공하는 링크와 수신 중인 오류 메시지 모두에서 Select24.0을 사용하고 있는 것으로 보입니다.그러나 귀하의 코드는 Select2의 이전 버전에 대해 작성되었습니다.

Select24.0을 계속 사용하려면:

(1) 변경합니다.resultsajax 옵션:processResults.

(2) 변경합니다.processResults기능을 다하다results그것이 반환하는 객체의 속성은 객체의 배열이고, 각 객체는 다음을 갖습니다.id그리고.text소유물.이를 위한 한 가지 방법은 함수를 사용하여 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

시도해 보십시오.

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

예제 json:

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

언급URL : https://stackoverflow.com/questions/28355083/how-to-load-json-data-to-use-it-with-select2-plugin