TokenSeparators in Select2
Thanks in advance, two things:
1- How can I take the "Enter" and "Tab" keys as a token in Select2?
This is part of the code I have.
$("#ListaValores").val($("#ListaValores").val().replace(/\;/g,','))
$("#ListaValores").select2({
tags: true,
tokenSeparators: [';'],
maximumResultsForSearch: -1,
dropdownCss: {display:'none'},
});
The first line just transforms the input, so the data can be used by Select2.
The original input could be as follows:
$("#ListaValores").val("value1;value2;value3")
These values are stored in db and loaded into a textbox which is then converted to select2.
Everything works as expected, but I would like to convert this part:
tokenSeparators: [';']
therefore it also accepts the "Enter" and "Tab" keys as a token.
Can anyone please help? I have tried ASCII codes but no luck.
2- Plus, is there any shortcut to turn off the counter image? (since there is no downloadable data, I really don't need the download image)
UPDATE 2:
I had success:
$("#s2id_ListaValores").on('keyup', function(e) {
if(e.keyCode === 13){
$("#ListaValores").val($("#ListaValores").val() + ';' + $("#s2id_autogen1").val())
}
});
But $ ("# s2id_autogen1"). val () is not static and always changes, so this kind of works one time ... plus, I still need to update the displayed results. I can do this by "updating" the div2, but then the div will change its id and the value of $ ("# s2id_ListaValores"). (Event "keyup", function (e) will not work.
source to share
I solved this problem with a recursion function:
//init select2 field:
initMultiSelect(tSel);
function initMultiSelect(tSel) {
tSel.select2('destroy');
tSel.select2({
tags: true,
tokenSeparators: [',', ' ', ';'],
dropdownCss: {display:'none'}
});
//manual add new values by Enter
(function (t) {
$('#s2id_' + t.attr('id')).on('keyup', function(e) {
if(e.keyCode === 13){
//add new value
t.val(t.val() + ',' + $('#s2id_' + t.attr('id') + ' input ').val());
//refresh select2
initMultiSelect(t);
//get focus to select2 last position
t.select2("close");
t.select2("open");
}
});
})(tSel);
}
source to share
Currently, when inserting, this is not possible in the current version of select2 because it uses input type = "text" as the input field and newlines are split on insert by the browser.
To make this work, select2 will need to be scheduled to use the text area instead. I have a Pull Request open that does this, which you can look at here: https://github.com/select2/select2/pull/4795 If / when my pull request is pooled you should be able to use the specified characters as tokenSeparators but until that happens, you can download your fork to fix your problem if you like.
source to share
Try using the following token separators for the "enter" and "tab" keys.
tokenSeparators: [';', '\n', '\t']
The "enter" key usually triggers a selection on Select2, but the newline character ("enter" in another program ") will not. You can use \n
to tell Select2 that they should also be treated as separators.
The same goes for the tab key, which should normally select the currently selected value and use it \t
as a separator when loaded from another source.
Keep in mind that this difference really matters when you insert data that needs to be labeled, as Select2 has bindings for these two keys that will automatically tokenize them. You may need to enable it tags
, although this will happen for this to happen.
source to share