Convert Select2 input to tokens

Question

Is there a Select2 jQuery plugin that has a built-in function to convert strings to tokens?

I want to be able to call this tokenization function when the user inserts rows in the Select2 field so that the inserted input becomes a token.

Answer 1

I think that I myself solved the question itself with the following code:

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

This assumes that the commas are set as delimiters in the initialization setting of the tokenSeparators plugin.

Answer 2

Version 4.0.1:

 $('#my-select').data('select2').dataAdapter.$search.val("tag1,tag2,").trigger("input"); 

This will add two tags: tag1 and tag2 (note trailing , ).

Important: you must add data: [] to select2 init parameters.

Answer 3

Use input type text and assign select2 to it. how

 <input type="text" id="makeTokens" /> 

and then in javascript

 $("#makeTokens").select2({ placeholder: "Paste data", tags: ["red", "green", "blue"], tokenSeparators: [",", " "] }); 

in tags, you can assign any values ​​that you want to display as selection options, and use tokenSeperators to separate text into a comma or spaces, etc.

Note. The resulting input value will mean tokens, separated by a comma.

Answer 4

For some reason, Donald's solution did not work for me (maybe newer versions of select2 behave differently). This is what worked for me:

 $('body').on('paste', '.select2-input', function (e) { var pasteData = (e.originalEvent || e).clipboardData.getData('text/plain') || ''; $(this).val(pasteData + ','); e.preventDefault(); }); 

Since at the time the event was triggered, the value of .select2-input was an empty string, I removed the insert line from the event object. Apparently, by default, select2 for the copy operation still started after that, so I had to add e.preventDefault(); so that it does not start and does not spoil the entrance.

Answer 5

just run this jQuery, which directly separates the separators from options.tokenSeparators and is automatically applied to all select2 instances on the page:

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