Wie zu verwenden Select2 mit JSON per Ajax-request?
Meine Select2 3.4.5 ist nicht die Arbeit mit JSON-Daten.
Hier ist mein Eingabefeld auf HTML:
<input class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' />
...und meine JavaScript -
$(".itemSearch").select2({
placeholder: "Search for an Item",
minimumInputLength: 2,
ajax: {
url: "/api/productSearch",
dataType: 'json',
quietMillis: 100,
data: function (term, page) {
return {
option: term
};
},
results: function (data, page) {
var more = (page * 10) < data.total;
return {
results: data.itemName,
more: more
};
}
},
formatResult: function (data, term) {
return data;
},
formatSelection: function (data) {
return data;
},
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) {
return m;
}
});
Machte ich eine API mit Laravel 4, die einen Wert zurückgibt, wenn ich etwas tippe auf mein Textfeld.
Hier ist das Ergebnis, wenn ich Schreibe "test" in meinem Textfeld:
[{"itemName":"Test item no. 1","id":5},
{"itemName":"Test item no. 2","id":6},
{"itemName":"Test item no. 3","id":7},
{"itemName":"Test item no. 4","id":8},
{"itemName":"Test item no. 5","id":9},
{"itemName":"Test item no. 6","id":10},
{"itemName":"Test item no. 7","id":11}]
Kann ich nicht hinzufügen, das Ergebnis meiner Select2 dropdown-Menü. Ich denke formatSelection
und formatResult
verursacht das problem weil ich nicht weiß, welche parameter gesetzt werden sollte, auf Sie. Ich weiß nicht, wo man diese Parameter, wie container -, Objekt-und Abfrage und die Werte, die Sie sollten zurückkehren, oder ist mein JSON-Antwort ist falsch?
InformationsquelleAutor melvnberd | 2014-01-04
Du musst angemeldet sein, um einen Kommentar abzugeben.
Hier haben Sie ein Beispiel
Es ist ganz einfach
Können Sie erklären, das "slug" - parameter?
Element ist ein Objekt mit completeName, slug und id-Eigenschaften. Dies ist nur ein Beispiel, kopieren und einfügen.
Von dort nehmen Sie "slug" param -? ich kann nur finden: itemName & id
Slug es ist eine tatsächliche Eigenschaft der Sache, Ihre Sache, ich habe dies, wie Sie sehen können, wie das hinzufügen von zusätzlichen Parametern 😉
InformationsquelleAutor Tolo Palmer
für select2 v4.0.0 etwas anders
Es funktionierte Dank, den Fehler, den ich machte, war nicht das mapping richtig zu
id
undtext
wichtige Werte.InformationsquelleAutor razorfish
In der Version 4.0.2 etwas anders Nur in
processResults
und inresult
:Müssen Sie
data.items
imresult
.items
ist Json name :items
ausdata.items
würde ich nicht hinzufügen müssenitems
- Attribut auf die richtige Antwort ? 😉ja, Sie ist einfach nur angeben
$.map(data, function (item)
wenn Ihr json ein array:[ {"id": 1,"text": "One"}, {"id": 2,"text": "Two"} ]
Wurden bashing meinen Kopf gegen eine Wand und dieser klärte die Sache auf. Danke, die Dokumentation für select2 ist äußerst mangelhaft.
Hilfreich, danke!
InformationsquelleAutor Ebad ghafoory
Dies ist, wie ich fest meine Problem, ich bekomme Daten in Variablen und durch die Verwendung von oben genannten Lösungen war ich immer Fehler
could not load results
. Ich hatte zu analysieren, die Ergebnisse anders in processResults.InformationsquelleAutor Chaudhry Waqas
Ddie Probleme können verursacht werden, durch falsche Zuordnung. Sind Sie sicher, dass Sie Ihr Ergebnis im "Daten"? In meinem Beispiel, den backend-code gibt die Ergebnisse unter "items" - Taste, so dass die Zuordnung sollte wie folgt Aussehen:
und nicht:
InformationsquelleAutor tester
Mein ajax nie gefeuert wird, bis ich wickelte das ganze in
setTimeout(function(){ .... }, 3000);
War ich mit der es im montierten Abschnitt Vue. es braucht mehr Zeit.
InformationsquelleAutor Apit John Ismail
Wenn der ajax-request wird nicht ausgelöst, überprüfen Sie bitte die select2-Klasse in der select-element. Entfernen der select2-Klasse wird das Problem beheben.
InformationsquelleAutor sudin