Gewusst wie: laden von JSON-Daten, um es mit select2 plugin

Möchte ich select2 plugin für mein Projekt. Ich folgte diese Beispiel, aber es funktioniert nicht für mich.

JSON-Ausgabe :

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

Skript :

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>

Dies ist das Ergebnis, wenn ich mein test-code mit console.log:

Select2: Die AJAX-Ergebnisse nicht ein array zurückgeben, in der results Schlüssel der Antwort.

Wo habe ich Fehler gemacht?

wenn Sie auf durchsuchen djubrivo.php erhalten Sie die json-array?
ja, offcource ich dieses 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"} etc. ... ...
etwas verändert wurde von version 3.4.2, denn dort kann ich laden, JSON auf die gleiche Weise, aber wenn ich jetzt versuche 4.0.0-version nicht funktionieren... Und mein json array output ist in Ordnung... die gleiche wie in den docs

InformationsquelleAutor dert detg | 2015-02-05

48

Es scheint, Sie sind mit Select2 4.0, beide aus dem link, den Sie in den Beispielen und aus der Fehlermeldung, die Sie empfangen. Dein code ist jedoch für Vorherige Versionen von Select2.

Wenn Sie weiterhin verwenden wollen Select2 4.0:

(1) Ändern Sie die results ajax-option, um processResults.

(2) Ändern Sie die processResults Funktion, so dass die results Eigenschaft des Objekts zurückgegeben wird ein array von Objekten, wobei jedes Objekt hat eine id und ein text Eigenschaft. Ein Weg dies zu tun ist die Verwendung der $.map() Funktion zum erstellen eines neuen array aus der zurückgegeben wird, durch den ajax-call.
```
processResults: function (data) {
    return {
        results: $.map(data, function(obj) {
            return { id: obj.ime, text: obj.ime };
        })
    };
}
```
Können Sie auch loszuwerden, die formatResult option.

(3) Verwenden Sie ein <select> element, statt einer <input> element.
```
<select id="stavka" name="stavka" class="form-control js-example-responsive"></select>
```
jsfiddle

danke jetzt funktioniert, aber WARUM kann ich nicht VERWENDEN-Suchfeld, wenn ich auf select2 Feld ? Ich kann nichts eingeben
Meinst du in jsfiddle? Geben Sie in das Suchfeld in der jsfiddle, aber sein Wert wird nicht verwendet.
Nein, an meinem Projekt localhost, kann ich nicht verwenden, serach Feld in select2... warum? Vielleicht, weil seine in bootstrap modal-Fenster ???
Ich sehe nichts in dem code in deiner Frage, dass würde verhindern, dass Sie von der Eingabe in das Suchfeld ein. Sie sind nicht übergibt den Wert im Feld "suchen" in deinem ajax-request allerdings, so das such-Feld ist nicht in Ihrem code verwendet.
DANKE FÜR DIE HILFE! ok, wie kann ich das tun? tut select2 haben build-in-Funktion?

InformationsquelleAutor John S
2

versuchen Sie dies :
```
$.getJSON("djubrivo.php", function (json) {
      $("#inputs").select2({
         data: json,
         width: "180px"
      });
 });
```
json-Beispiel :
```
        {id:0,text:"enhancement"},
        {id:1,text:"bug"},
        {id:2,text:"duplicate"},
        {id:3,text:"invalid"},
        {id:4,text:"wontfix"}
```
Dies ist nicht das, was der OP gefragt. Sie machen eine Anfrage und Zwischenspeichern der Ergebnisse. Wenn eine neue djubrivo erstellt wird, nachdem Sie Ihre GET-Anfrage, wird es nicht vorhanden sein, wählen Sie.
ja, aber es ist hilfreich, wenn ajax zu laden vollständige Liste.. nicht während der Eingabe und der code ist in Ordnung für Sie, dass

InformationsquelleAutor Bruno Ribeiro

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.