È possibile incollare un elenco in un campo select2 e abbinare ciascun elemento nell'elenco?

Question

Sto usando Select2 per gestire elenchi di dati di grandi dimensioni. Gli utenti hanno espresso il desiderio di essere in grado di incollare un elenco nel campo Select2 per selezionare vari elementi contemporaneamente anziché inserire e abbinare manualmente ciascun elemento nell'elenco.

Ho tentato di utilizzare tokenSeparators per separare gli elementi nell'elenco. Questo e lo demo on tokens in the documentation mi portano a credere che ciò che spero di fare sia possibile, ma finora non ho avuto gioia.

Il codice che uso per istanziare Select2 è:

$('input').select2({ 
    width: 'element', 
    matcher: function (term, text) { 
     return text.toUpperCase().indexOf(term.toUpperCase()) === 0; 
    }, 
    minimumInputLength: 3, 
    multiple: true, 
    data: tagList, // tagList is an array of objects with id & text parameters 
    placeholder: 'Manage List', 
    initSelection: function (element, callback) { 
     var data = []; 
     $.each(function() { 
      data.push({id: this, text: this}); 
     }); 
     callback(data); 
    }, 
    tokenSeparators: [',', ', ', ' '] 
}); 

solo per chiarire, in tutti gli altri aspetti le opere di campo select2. È solo che nulla viene abbinato quando una lista viene incollata nel campo. Vorrei testare tutti gli elementi nell'elenco incollato. È possibile e, in tal caso, come?

Edit: Ho provato il seguente codice ma non sembra funzionare:

$('body').on('paste', '#s2id_list-unitids .select2-input', function() { 
    var that = this; 
    setTimeout(function() { 
     var tokens = that.value.split(/[\,\s]+/); 
     $('#list-unitids').val(tokens, true);console.log($('#list-unitids').select2('val')); 
    }, 1); 
}); 

Ed ecco un violino che ho creato: http://jsfiddle.net/KCZDu/.

Answer 1

select2 fornisce un'opzione tokenizer che consente di pre-elaborare l'input. qui è una possibile implementazione per il vostro particolare caso d'uso:

tokenizer: function(input, selection, callback) { 

     // no comma no need to tokenize 
     if (input.indexOf(',')<0) return; 

     var parts=input.split(","); 
     for (var i=0;i<parts.length;i++) { 
      var part=parts[i]; 
      part=part.trim(); 
      // todo: check for dupes (if part is already in [selection]) 

      // check if the part is valid 
      // todo: you will need a better way of doing this 
      var valid=false; 
      for (var j=0;j<unitIds.length;j++) { 
       if (part===unitIds[j]) { valid=true; break; } 
      } 

      if (valid) callback({id:part,text:part}); 
     } 
    } 

qui è un violino di lavoro: http://jsfiddle.net/XcCqg/38/

notare anche il vostro violino originale utilizza select2 3.2, che è molto vecchio e non può sostenere il tokenizzatore.

Answer 2

Sostituisce fondamentalmente la funzione di incolla predefinita per gestire il nuovo testo di input, questo codice interromperà l'input in base ai separatori specificati nell'opzione 'tokenSeparators', quindi li aggiunge tutti all'elenco separato, è necessario solo 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 $("<option></option>") 
       .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'); 
    });