Как использовать теги Select2 с символом TokenSeparator с символом новой строки?

Я создаю вход select2, который позволяет пользователям вставлять данные csv и преобразовывать его в теги. Моя проблема в том, что я хотел бы иметь возможность создавать теги с данными, которые копируются по вертикали и потому что select2 использует элемент <input type="text" />, который преобразует символы новой строки в пространство. Я не уверен, что это возможно. Я хотел бы продолжать использовать select2 для этого, но я открыт для альтернатив, если нет абсолютно никакого способа.Как использовать теги Select2 с символом TokenSeparator с символом новой строки?

Выбор2 Определение:

$('#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">

источник

2016-05-09 Will Sampson

Проблема, как вы предлагаете, что вставляемые новые строки уже были заменены на время код Выбор2 начинает формируя теги. Вот почему заказчик tokenizer function тоже не поможет нам.

Трюк поэтому , чтобы поймать новые строки во время пасты и заменить их одним из других разделителей. Убедитесь, что это выполняется после вашего .select2(...) код:

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

Вы можете попробовать его в this fiddle.

Примечание: Я не совсем уверен, как универсальная поддержка e.originalEvent.clipboardData.getData('Text') находится в современных браузерах. Я видел предложения, что IE9 требует window.clipboardData.getData("Text"), поэтому вам может потребоваться добавить проверки, чтобы узнать, какие свойства поддерживаются браузером.

источник

2016-05-19 19:28:08 GertG

Привет, спасибо за ответ, я потерял всякую надежду на это и внедрил собственный редактор, используя contentEditable div (который принимает символы новой строки). Позвольте мне попробовать ваш ответ, хотя и я вернусь к вам, как это сработало для меня. –

Отлично. Я отредактировал, чтобы добавить скрипку, где вы можете попробовать. И я изменил код, чтобы он сохранял содержимое, которое уже было в поле, и добавляет разделитель после последнего вставленного элемента. Это, вероятно, имеет больше смысла в большинстве случаев использования, но, конечно, вы можете адаптировать его в соответствии с вашими потребностями. – GertG

Скрипка, с которой вы связаны, - это именно то, как я ожидаю, что она сработает. испытал его в хроме. Я не уверен в совместимости со старыми браузерами, но насколько мне известно, это правильный ответ. –

Как использовать теги Select2 с символом TokenSeparator с символом новой строки?

ответ

Смежные вопросы