Auto tokenize dell’ultimo elemento nella stringa incollata utilizzando select2

Sto usando jQuery Select2 per creare un input che consenta la tokenizzazione automatica. Ho inizializzato l’input select2 con le seguenti opzioni:

{ tags: [''], tokenSeparators = [',', ' '] } 

Roba molto semplice Quando digito una stringa di testo nell’input, seguita da una virgola o spazio, la stringa precedente viene tokenizzata, esattamente come mi aspetterei.

Tuttavia, ho bisogno di supportare l’inserimento del testo nell’input. Questo è dove le cose si disgregano.

Se incollo ‘1,2,3,4’ nell’input, ottengo i token separati per 1, 2 e 3, ma 4 non è tokenizzato. Invece, rimane come valore input.select2-input e quando il focus cambia il valore scompare.

Ho provato un certo numero di approcci diversi, senza alcun risultato.

Ho tentato di intercettare l’evento paste, ottenendo il valore della stringa incollata con e.originalEvent.clipboardData.getData('text/plain') , cancellando l’evento e aggiungendo una virgola alla fine della stringa prima di modificare il valore dell’input con un scaduto .select2('val', str) .

Ho provato a simulare un evento keypress virgola dopo l’evento paste. ( .trigger({type: 'keypress', which: 188}) )

Ho provato a cambiare il valore di input.select2-input per ogni elemento nell’array creato dividendo la stringa di pasta.

Niente sembra funzionare. Qualche idea?

In base a una domanda che hai pubblicato, puoi utilizzare il seguente codice che funziona con le varianti:

1 2 3 4

1,2,3,4

1,2 3, 4

Puoi controllare questo jsfiddle . Nota: ho trovato che la versione 3.5.0 ha un bug con la terza variante, quindi dovresti usare l’ultima versione 3.5.1.

 $("#select2-input").select2({ tags: [''], tokenizer: function(input, selection, callback) { if (input.indexOf(',') < 0 && input.indexOf(' ') < 0) return; var parts = input.split(/,| /); for (var i = 0; i < parts.length; i++) { var part = parts[i]; part = part.trim(); callback({id:part,text:part}); } } }); 

Non sono sicuro di aver compreso il tuo problema, ma ho creato un codice per separare il nuovo input dalla funzione Incolla, Fondamentalmente sostituisce la funzione di incolla predefinita per gestire il nuovo testo di input, questo codice interromperà l’input in base al i separatori specificati nell’opzione “tokenSeparators”, quindi li aggiungono tutti alla lista separata, è sufficiente eseguire questo codice alla fine della pagina:

 $(document).on('paste', 'span.select2', function (e) { e.preventDefault(); var select = $(e.target).closest('.select2').prev(); var clipboard = (e.originalEvent || e).clipboardData.getData('text/plain'); var createOption = function (value, selected) { selected = typeof selected !== 'undefined' ? selected : true; return $("") .attr("value", value) .attr("selected", selected) .text(value)[0] }; $.each( clipboard.split(new RegExp(select.data('select2').options.options.tokenSeparators.map(function (a) { return (a).replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); }).join('|'))), function (key, value) { if (value && (!select.val() || (select.val() && select.val().indexOf('' + value) == -1))) { select.append(createOption(value)); } }); select.trigger('change'); }); 

È ansible rivedere la mia risposta originale qui https://stackoverflow.com/a/37006931/2073339