Tagging mit AJAX in select2

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?

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
      };
    }
  }
});

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
      };
    }
  }
});

createSearchChoice : function (term) { return {id: term, text: term}; }

Fügen Sie einfach dieses Optionselement hinzu

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.