リストをselect2フィールドに貼り付け、リスト内の各アイテムにマッチさせることは可能ですか？

Question

私はSelect2を使用して大きなデータリストを管理しています。ユーザは、リスト内の各項目を手動で入力して一致させるのではなく、一度に様々な項目を選択するために、リストをSelect2フィールドに貼り付けることを望んでいる。

tokenSeparatorsを使用して、リスト内の項目を区切りました。これとdemo on tokens in the documentationは、私が望んでいることは可能だと信じていますが、今まで私は喜んでいませんでした。

私はSelectセレクトをインスタンス化するために使用するコードは次のとおりです。

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

ただ、他のすべての点SELECT2フィールドの作品に、明確にします。リストがフィールドに貼り付けられても、何も一致しないだけです。貼り付けられたリストのすべての項目をテストしたいと思います。これは可能ですか？あれば、どうですか？

編集：私は、次のコードを試してみましたが、それは動作していないよう：http://jsfiddle.net/KCZDu/：

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

そして、ここでは、私が作成したフィドルです。

Answer 1

select2には、入力を前処理できるようにするtokenizerオプションがあります。ここにあなたの特定のユースケースのための可能な実装である：ここ

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

は作業フィドルです：http://jsfiddle.net/XcCqg/38/

はまたあなたのオリジナルのフィドルは非常に古くなっているとトークナイザをサポートしていない可能性がSELECT2 3.2を使用しています注意してください。

Answer 2

基本的には、新しい入力テキストを処理するデフォルトの貼り付け関数をオーバーライドします。このコードは、オプション 'tokenSeparators'で指定された区切り文字に基づいて入力を破棄し、すべてを区切りリストに追加します。あなたのページの最後にこのコード：

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