Select2 jQueryプラグインには、文字列をトークンに変換する組み込み関数がありますか?
ユーザーが文字列を Select2 フィールドに貼り付けたときに、このトークン化関数を呼び出して、貼り付けられた入力がトークンになるようにしたいと考えています。
Select2 jQueryプラグインには、文字列をトークンに変換する組み込み関数がありますか?
ユーザーが文字列を Select2 フィールドに貼り付けたときに、このトークン化関数を呼び出して、貼り付けられた入力がトークンになるようにしたいと考えています。
次のコードで自分で質問を解決したと思います:
// force tokenizing of Select2 auto-complete fields after pasting
$('body').on('paste', '.select2-input', function() {
// append a delimiter and trigger an update
$(this).val(this.value + ',').trigger('input');
});
これは、プラグインの「tokenSeparators」初期設定でカンマが区切り文字として設定されていることを前提としています。
この jQuery を実行するだけで、セパレーターをoptions.tokenSeparators
直接取得し、ページ内のすべての select2 インスタンスに自動的に適用されます。
$(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');
});
入力タイプのテキストを使用し、それに select2 を割り当てます。お気に入り
<input type="text" id="makeTokens" />
そしてJavaScriptで
$("#makeTokens").select2({
placeholder: "Paste data",
tags: ["red", "green", "blue"],
tokenSeparators: [",", " "]
});
タグでは、選択オプションとして表示する任意の値を割り当て、tokenSeperators を使用してコンマやスペースなどでテキストを区切ることができます。
注: 結果の入力値は、カンマ区切りのトークンになります。
何らかの理由で、Donald の解決策はうまくいきませんでした (新しいバージョンの select2 では動作が異なる可能性があります)。これは私のために働いたものです:
$('body').on('paste', '.select2-input', function (e) {
var pasteData = (e.originalEvent || e).clipboardData.getData('text/plain') || '';
$(this).val(pasteData + ',');
e.preventDefault();
});
イベントがトリガーされた時点での値は.select2-input
空の文字列だったので、貼り付けられた文字列をイベント オブジェクトから抽出しました。どうやら、アクションをコピーするためのデフォルトのselect2は、この後もまだトリガーされていたのでe.preventDefault();
、実行を停止して入力を台無しにするために追加する必要がありました。