Wie Verwenden von Select2-Tags mit Newline-Zeichen tokenSeparator?

Question

Ich erstelle eine select2-Eingabe, mit der Benutzer CSV-Daten einfügen und in Tags konvertieren können. Mein Problem ist, dass ich in der Lage sein möchte, Tags mit Daten zu erstellen, die vertikal kopiert werden, und da select2 ein <input type="text" />-Element verwendet, das Zeilenumbrüche in einen Bereich konvertiert, bei dem ich nicht sicher bin, ob es möglich ist. Ich würde gerne weiter select2 dafür verwenden, aber ich bin offen für Alternativen, wenn es absolut keine Möglichkeit gibt.

Select2 Definition:

$('#search_tags').select2({ 
    tags: [], 
    tokenSeparators: [",", "\t", "\n"], 
    dropdownCssClass: 'select2-hidden', 
    placeholder: "Paste Here", 
    formatNoMatches: function() {return '';} 
}); 

HTML:

<input id="search_tags" type="hidden" style="width:100%;" tabindex="-1">

Answer 1

Das Problem ist, wie Sie vorschlagen, dass die eingefügten Zeilenumbrüche bereits durch die Zeit der select2 Code ersetzt beginnt die Bildung Stichworte. Deshalb hilft uns auch ein Brauch tokenizer function hier nicht.

Der Trick ist daher , um die Zeilenumbrüche während der Paste zu fangen und sie durch einen der anderen Separatoren zu ersetzen. Achten Sie darauf, dies nach Ihrem .select2(...) Code ausgeführt wird:

$('.select2-input').on('paste', function(e) { 
    //get the raw pasted text 
    var data = e.originalEvent.clipboardData.getData('Text'); 
    //replace newlines by tabs and add to conent 
    $(this).val($(this).val() + '\t' + data.replace(/\n/g, '\t') + '\t'); 
    //prevent normal paste behaviour 
    return false; 
}); 

Sie versuchen, es kann in this fiddle aus.

Hinweis: Ich bin mir nicht ganz sicher, wie universelle Unterstützung für e.originalEvent.clipboardData.getData('Text') in modernen Browsern ist. Ich habe Vorschläge gesehen, die IE9 stattdessen window.clipboardData.getData("Text") erfordert, also müssen Sie möglicherweise Prüfungen hinzufügen, um zu sehen, welche Eigenschaften vom Browser unterstützt werden.