Ich habe diese Anforderungen mit select2:
- Ich muss einige Tags mit select2 ajax durchsuchen
- Außerdem muss ich in select2 "Tags" verwenden, die Werte zulassen, die nicht in der Liste enthalten sind (Ajax-Ergebnis).
Beide Szenarien arbeiten unabhängig voneinander. Zusammengefügte aJax-Werte werden jedoch nur ausgefüllt. Wenn wir andere Werte eingeben, die nicht in der Liste enthalten sind, heißt es "Keine Übereinstimmungen gefunden".
Mein Szenario Wenn der Benutzer einen neuen Wert eingibt, der nicht in der Liste enthalten ist, kann er sein eigenes Tag erstellen.
Wie kann das funktionieren?
Antworten:
Select2 hat die Funktion "createSearchChoice":
Sie können erreichen, was Sie wollen, indem Sie:
createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) { return {id:term, text:term}; } }, multiple: true
Hier ist eine vollständigere Antwort, die ein JSON-Ergebnis an eine Ajax-Suche zurückgibt und das Erstellen von Tags aus dem Begriff ermöglicht, wenn der Begriff keine Ergebnisse zurückgibt:
$(".select2").select2({ tags: true, tokenSeparators: [",", " "], createSearchChoice: function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term) === 0; }).length === 0) { return { id: term, text: term }; } }, multiple: true, ajax: { url: '/path/to/results.json', dataType: "json", data: function(term, page) { return { q: term }; }, results: function(data, page) { return { results: data }; } } });
quelle
$(data).filter
Funktion ist der Ort, an dem der Abgleich stattfindet, undthis.text
ist einfach der Wert destext
Schlüssels im zurückgegebenen JSON. Wenn Sie beispielsweise eine Kontaktliste zurückgeben, möchten Sie dies überprüfenthis.name
. Wenn Sie in Ihrer Remote-Datei (/path/to/results.json
) eine Art Term-Matching durchführen , möchten Sie einfach sicherstellen, dass die zurückgegebenen Elemente die von Ihnen benötigten Eigenschaften aufweisen und nach der Rückgabe von nicht undefiniert oder schlecht formatiert sind die entfernte Datei. (Puh, tolle Antwort. Danke Chris!)Wählen Sie v4
http://jsfiddle.net/8qL47c1x/2/
HTML:
<select multiple="multiple" class="form-control" id="tags" style="width: 400px;"> <option value="tag1">tag1</option> <option value="tag2">tag2</option> </select>
JavaScript:
$('#tags').select2({ tags: true, tokenSeparators: [','], ajax: { url: 'https://api.myjson.com/bins/444cr', dataType: 'json', processResults: function(data) { return { results: data } } }, // Some nice improvements: // max tags is 3 maximumSelectionLength: 3, // add "(new tag)" for new tags createTag: function (params) { var term = $.trim(params.term); if (term === '') { return null; } return { id: term, text: term + ' (new tag)' }; }, });
Wählen Sie v3.5.2
Beispiel mit einigen Verbesserungen:
http://jsfiddle.net/X6V2s/66/
html:
<input type="hidden" id="tags" value="tag1,tag2" style="width: 400px;">
js:
$('#tags').select2({ tags: true, tokenSeparators: [','], createSearchChoice: function (term) { return { id: $.trim(term), text: $.trim(term) + ' (new tag)' }; }, ajax: { url: 'https://api.myjson.com/bins/444cr', dataType: 'json', data: function(term, page) { return { q: term }; }, results: function(data, page) { return { results: data }; } }, // Take default tags from the input value initSelection: function (element, callback) { var data = []; function splitVal(string, separator) { var val, i, l; if (string === null || string.length < 1) return []; val = string.split(separator); for (i = 0, l = val.length; i < l; i = i + 1) val[i] = $.trim(val[i]); return val; } $(splitVal(element.val(), ",")).each(function () { data.push({ id: this, text: this }); }); callback(data); }, // Some nice improvements: // max tags is 3 maximumSelectionSize: 3, // override message for max tags formatSelectionTooBig: function (limit) { return "Max tags is only " + limit; } });
JSON:
[ { "id": "tag1", "text": "tag1" }, { "id": "tag2", "text": "tag2" }, { "id": "tag3", "text": "tag3" }, { "id": "tag4", "text": "tag4" } ]
AKTUALISIERT am 22.01.2015:
Fix jsfiddle: http://jsfiddle.net/X6V2s/66/
AKTUALISIERT am 09.09.2015:
Mit Select2 v4.0.0 + wurde es einfacher.
Wählen Sie v4.0.0
https://jsfiddle.net/59Lbxvyc/
HTML:
<select class="tags-select" multiple="multiple" style="width: 300px;"> <option value="tag1" selected="selected">tag1</option> <option value="tag2" selected="selected">tag2</option> </select>
JS:
$(".tags-select").select2({ // enable tagging tags: true, // loading remote data // see https://select2.github.io/options.html#ajax ajax: { url: "https://api.myjson.com/bins/444cr", processResults: function (data, page) { return { results: data }; } } });
quelle
GET https://api.myjson.com/bins/444cr?q=TEST
. Aber api.myjson.com/bins/444cr ist eine statische URL und Abfrageparameter nicht verarbeiten kann. In einer realen App verwendet Ihr Backend diesen Abfrageparameter "q", um die Ergebnisse zu filtern.createSearchChoice : function (term) { return {id: term, text: term}; }
Fügen Sie einfach dieses Optionselement hinzu
quelle
Sie können dies zum Laufen bringen, indem Ihre Ajax-Funktion auch den Suchbegriff als erstes Ergebnis in der Ergebnisliste zurückgibt. Der Benutzer kann dieses Ergebnis dann als Tag auswählen.
quelle