如何设置select的值以匹配&tokenize jquery

Question

我正在尝试将某个函数绑定到select字段时将某些东西粘贴到它中(它在允许多个样式和select2:matcher/tokenize后看起来像一个输入字段)但在IE中它总是截断任何包含新行字符的粘贴文本.

<form method="POST" action="/run" class="ui-widget" onsubmit=" return confirmSubmit(this, 'run',true) ">
    Editor:
    <select name="editor" id="editor" multiple style="width: 200px">
        <option>ALL</option>
    </select>
        <input type="submit" value="Submit">
 </form>

bind('paste')似乎没有在一个<select>对象上工作所以我不得不使用bind('change')

var unitIds = ["Red","Yellow","Green"];

$.each(unitIds, function(i, f) {
        $('select[name="editor"]').append($('<option>').text(f));
    });

$('#pastefromclip').select2({
    matcher: function(term, text) {
                    return text.toUpperCase().indexOf(term.toUpperCase()) === 0;
                },
    tokenizer: function(input, selection, callback) {
                    if (input.indexOf(" ") < 0) return;
                    var parts = input.split(" ");
                for (var i = 0; i < parts.length; i++) {
                    var part = parts[i];
                    if(part.length > 0){
                        if (unitIds.indexOf(part) == -1) {
                            alert('Invalid fields: ' + part);
                        } else {
                            callback({
                                id: part,
                                text: part
                                });
                            }
                        }
                    }
                }
});
$('#editor').bind('change', function (e) {
            var clipped = window.clipboardData.getData('Text');
            clipped = clipped.replace(/(\r\n|\n|\r)/gm, " "); //replace newlines with spaces
            //$(this).val(clipped); // this doesn't seem to work
            var element = document.getElementById('editor');
            element.value = clipped; // doesn't seem to work either
            return false; //cancel the pasting event
        });

1. 将以下内容复制并粘贴到选择字段中:
   红色
   黄色

2. 它仅粘贴"红色"并显示匹配的对象.在我选择匹配的对象并将其标记化之前,它无法识别更改功能.

3. 识别出更改后,它会通过clipboardData运行并看到红色和黄色,但无法为该数据分配选择字段.

   <script src="https://rawgit.com/free-jqgrid/jqGrid/master/plugins/jquery.jqgrid.showhidecolumnmenu.js"></script>
   <script type="text/javascript" src="javascript/jqGrid/jquery-1.8.3.js"></script>
   <script type="text/javascript" src="javascript/jqGrid/jquery-ui-1.9.2.js"></script>
   <script type="text/javascript" src="javascript/toastr.min.js"></script>
   <script type="text/javascript" src="javascript/adminConsole.js"></script>
   <script type="text/javascript" src="javascript/select2.min.js"></script>
   <script type="text/javascript" src="javascript/moment.min.js"></script>
   <script type="text/javascript" src="javascript/jqGrid/ui.multiselect.js"></script>
   <script type="text/javascript" src="javascript/jqGrid/grid.locale-en.js"></script>
   <script type="text/javascript" src="javascript/jqGrid/jquery.jqGrid.min.js"></script>
   

Answer 1

对多个输入使用 TokenSeparators

看到它 行动

    $(".js-example-tokenizer").select2({
  tags: true,
  tokenSeparators: [',', ' ']
})

请参阅Select2 Tokenization中的自动标记化部分

另外，当复制粘贴选项（红绿）时，不要忘记最后添加“，”