Reputation: 1764
I use select2 to add tags. There is an option to keep the select list open on selecting an item (closeOnSelect
), but how can I make this happen only if the shift key is pressed while selecting it? Try setting closeOnSelect
to false
to see what I want to happen only when the shift key is pressed.
Here's a list of API options: https://select2.org/configuration/options-api
Here's a list of events: https://select2.org/programmatic-control/events
$(".form-control").select2({
tags: true,
tokenSeparators: [',', ' '],
closeOnSelect: true
})
.on('select2:select', function (e) {
// How can I reach shiftKey here?
if( e.shiftKey )
{
alert('How do I make closeOnSelect: false happen here?');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control" multiple="multiple" style="width: 300px">
<option selected="selected">orange</option>
<option>white</option>
<option selected="selected">purple</option>
</select>
Upvotes: 0
Views: 1100
Reputation: 501
I think you have two choices.
You may don't know, but select2
seems to have a similar function; it checks if the control key is being held.
Let's see select2.js, and search // Don't close if the control key is being held
.
I think it's easy that you modify that part of the plugin directly, rather than implement yourself.
(I couldn't find the way of overwriting the function.)
However, I'm also found the way.
But maybe sometimes can't prevent to close select2
...
Firstly, you need to keydown
and keyup
event at the 2 part.
// jQuery keydown doesn't work for some reason.(It seems this plugin is a bit tricky.)
// This event is used when the text box has focus.
document.getElementsByClassName('select2-search__field')[0].onkeydown = function(e) {
if (e.keyCode === 16) {
isShiftDown = true;
}
}
document.getElementsByClassName('select2-search__field')[0].onkeyup = function(e) {
if (e.keyCode === 16) {
isShiftDown = false;
}
}
// This event is used when the text box doesn't has focus.
$(window).on("keydown", function(e) {
if (e.keyCode === 16) {
isShiftDown = true;
}
}).on("keyup", function(e) {
if (e.keyCode === 16) {
isShiftDown = false;
}
});
Secondly, add closing
event.
// Closing (if you return false in this event, select2 doesn't close.)
.on('select2:closing', function () {
// To be exact, there's no need to return true.
return !isShiftDown;
});
Of course, even though you success to implement, the Ctrl key function still exists.
For Example.
UPDATED
Add logic, considering "If it's multiple" and "If it isn't present". Just in case.
var inputs = document.getElementsByClassName('select2-search__field');
if (inputs.length > 0) {
for (var i=0; i<inputs.length; i++) {
inputs[i].onkeydown = function(e) {
if (e.keyCode === 16) {
isShiftDown = true;
}
}
inputs[i].onkeyup = function(e) {
if (e.keyCode === 16) {
isShiftDown = false;
}
}
}
}
Upvotes: 1