Ist es möglich, eine Liste in ein select2-Feld einzufügen und jedes Element in der Liste abzugleichen?

Question

Ich verwende Select2, um große Datenlisten zu verwalten. Benutzer haben den Wunsch geäußert, eine Liste in das Feld "Select2" einfügen zu können, um verschiedene Elemente gleichzeitig auszuwählen, anstatt jedes Element in der Liste manuell einzugeben und abzugleichen.

Ich habe versucht, tokenSeparators zu verwenden, um die Elemente in der Liste zu trennen. Dies und die demo on tokens in the documentation lassen mich glauben, dass das, was ich zu tun hoffe, möglich ist, aber bisher hatte ich keine Freude.

Der Code Ich benutze Select2 zu instanziiert ist:

$('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: [',', ', ', ' '] 
}); 

Nur um zu klären, in jeder anderen Hinsicht die select2 Feldarbeiten. Es ist nur, dass nichts übereinstimmt, wenn eine Liste in das Feld eingefügt wird. Ich möchte alle Elemente in der eingefügten Liste testen. Ist das möglich und wenn ja, wie?

Edit: Ich habe den folgenden Code versucht, aber es scheint nicht zu funktionieren:

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

Und hier ist eine Geige ich erstellt habe: http://jsfiddle.net/KCZDu/.

Answer 1

select2 bietet eine tokenizer Option, mit der Sie die Eingabe vorverarbeiten können. hier ist eine mögliche Implementierung für Ihre usecase:

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

hier ist eine Arbeits Geige: http://jsfiddle.net/XcCqg/38/

auch Ihre ursprüngliche Geige beachten verwendet select2 3.2, die sehr veraltet und nicht die tokenizer unterstützen.

Answer 2

Im Grunde überschreibt es die Standard-Einfügefunktion, um den neuen Eingabetext zu verarbeiten. Dieser Code unterbricht die Eingabe basierend auf den in der Option 'tokenSeparators' angegebenen Trennzeichen und fügt sie dann getrennt zur Liste hinzu Dieser Code am Ende Ihrer Seite:

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