Czy można wkleić listę do pola select2 i dopasować do każdej pozycji na liście?

Question

Używam Select2 do zarządzania dużymi listami danych. Użytkownicy wyrazili chęć, aby móc wkleić listę do pola Select2, aby wybrać różne elementy na raz, zamiast ręcznie wprowadzać i dopasowywać każdy element na liście.

Próbowałem użyć tokenSeparators, aby oddzielić pozycje na liście. To i demo on tokens in the documentation doprowadziło mnie do przekonania, że ​​to, co mam nadzieję zrobić, jest możliwe, ale do tej pory nie miałem żadnej radości.

Kod używam instancji select2 jest:

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

Właśnie w celu wyjaśnienia, we wszystkich innych aspektach pracach polowych select2. Po prostu nic nie jest dopasowane, gdy lista jest wklejana na pole. Chciałbym przetestować wszystkie elementy na wklejonej liście. Czy to możliwe, a jeśli tak, to w jaki sposób?

Edit: Próbowałem poniższy kod, ale nie wydaje się działać:

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

A oto skrzypce Utworzona: http://jsfiddle.net/KCZDu/.

Answer 1

Opcja select2 udostępnia opcję tokenizer, która umożliwia wstępne przetworzenie danych wejściowych. tutaj jest możliwa realizacja dla danego 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}); 
     } 
    } 

o to skrzypce robocze: http://jsfiddle.net/XcCqg/38/

również pamiętać, oryginalne skrzypce zastosowania select2 3.2, który jest bardzo przestarzałe i nie może wspierać tokenizera.

Answer 2

Zasadniczo zastępuje domyślną funkcję wklejania do obsługi nowego tekstu wejściowego, ten kod przerwie dane wejściowe w oparciu o separatory określone w opcji "tokenSeparatory", a następnie doda je wszystkie do oddzielonej listy, wystarczy uruchomić ten kod na końcu strony:

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