Tagging mit AJAX in select2

74

Ich tagge mit select2

Ich habe diese Anforderungen mit select2:

  1. Ich muss einige Tags mit select2 ajax durchsuchen
  2. 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?

Sri
quelle
Du solltest Chris 'Antwort akzeptieren.
Marco Kerwitz

Antworten:

98

Select2 hat die Funktion "createSearchChoice":

Erstellt eine neue auswählbare Auswahl aus dem Suchbegriff des Benutzers. Ermöglicht die Erstellung von Auswahlmöglichkeiten, die über die Abfragefunktion nicht verfügbar sind. Nützlich, wenn der Benutzer im laufenden Betrieb Auswahlmöglichkeiten erstellen kann, z. B. für den Anwendungsfall "Markieren".

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
      };
    }
  }
});
Chris Edwards
quelle
5
Für diejenigen, die bei Verwendung dieses Snippets auf Schwierigkeiten stoßen: Die $(data).filterFunktion ist der Ort, an dem der Abgleich stattfindet, und this.textist einfach der Wert des textSchlüssels im zurückgegebenen JSON. Wenn Sie beispielsweise eine Kontaktliste zurückgeben, möchten Sie dies überprüfen this.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!)
jClark
1
Können Sie sich bitte diese Frage ansehen? stackoverflow.com/questions/35231584/…
Rocx
37

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
      };
    }
  }
});
Alexander Fedorov
quelle
sehr schöne Demonstration :) @faost
Sri
Danke - Lebensretter! und Zeit: P
Luis Lopes
@faost könntest du dir das bitte ansehen. wenn möglich stackoverflow.com/questions/35216302/…
Rocx
3
@faost: select2 v4.0.0 in Ihrer Demo Auto Complete nicht funktioniert und nicht filtern / Wort finden
ಠ_ಠ
1
@ ಠ_ಠ select2 Suchbegriff als Abfrageparameter senden, in meinem Beispiel sieht die Anfrage folgendermaßen aus : 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.
Alexander Fedorov
5
createSearchChoice : function (term) { return {id: term, text: term}; }

Fügen Sie einfach dieses Optionselement hinzu

chuck911
quelle
4
Sie sollten dies nicht tun, da der Benutzer bei vorhandenem Tag zwei Auswahlmöglichkeiten für dasselbe Tag hat, z. B. 'test' (aus der Datenbank) und 'test' - neu erstellt. Sie sollten überprüfen, ob der Begriff bereits in den Daten enthalten ist.
Marxin
0

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.

Tor
quelle