Tagging con AJAX in select2

Sto facendo tagging con select2

Ho questi requisiti con select2:

  1. Ho bisogno di cercare alcuni tag usando select2 ajax
  2. Inoltre ho bisogno di utilizzare “tag” in select2 che consente valori che non sono nella lista (risultato Ajax).

Entrambi gli scenari funzionano in modo indipendente. Ma uniti insieme, i valori Jax sono solo popolati. Se digitiamo altri valori non presenti nell’elenco, significa “nessuna corrispondenza trovata”

Il mio scenario Se l’utente digita un nuovo valore che non è nella lista, consenti loro di creare il proprio tag.

Qualche modo per farlo funzionare?

Select2 ha la funzione “createSearchChoice”:

Crea una nuova scelta selezionabile dal termine di ricerca dell’utente. Permette la creazione di scelte non disponibili tramite la funzione query. Utile quando l’utente può creare scelte al volo, ad es. Per il caso di “codifica”.

Potresti ottenere ciò che vuoi usando:

createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) { return {id:term, text:term}; } }, multiple: true 

Ecco una risposta più completa che restituisce un risultato JSON a una ricerca Ajax e consente di creare tag dal termine, se il termine non ha restituito risultati:

 $(".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 }; } } }); 

Seleziona v4

http://jsfiddle.net/8qL47c1x/2/

HTML:

  

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

Seleziona v3.5.2

Esempio con alcuni miglioramenti:

http://jsfiddle.net/X6V2s/66/

html:

  

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

AGGIORNAMENTO 2015-01-22:

Correggere jsfiddle: http://jsfiddle.net/X6V2s/66/

AGGIORNAMENTO 2015-09-09:

Con Select2 v4.0.0 + è diventato più facile.

Seleziona v4.0.0

https://jsfiddle.net/59Lbxvyc/

HTML:

  

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

basta aggiungere questa voce opzione

Puoi farlo funzionare, facendo in modo che la funzione Ajax restituisca anche il termine di ricerca, come primo risultato nell’elenco dei risultati. L’utente può quindi selezionare quel risultato come tag.