仅在 shift-select 时保持 select2 打开

Question

我使用 select2 添加标签。有一个选项可以在选择项目时保持选择列表打开 (closeOnSelect)，但是只有在选择项目时按下 shift 键，我才能做到这一点？尝试将 closeOnSelect 设置为 false 以查看我希望仅在按下 shift 键时发生的情况。

以下是 API 选项列表：https://select2.org/configuration/options-api

这里是事件列表：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>

Answer 1

我认为你有两个选择。 你可能不知道，select2 好像有类似的功能；它检查是否正在按住控制键。 让我们看看select2.js，然后搜索// Don't close if the control key is being held。 我认为您直接修改插件的那部分很容易，而不是自己实现。
（我找不到覆盖函数的方法。）

不过，我也找到了方法。
但也许有时无法阻止关闭select2 ...

首先，你需要在第二部分keydown和keyup事件。

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

其次，添加closing事件。

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

当然，即使你成功实现了，Ctrl键功能依然存在。
For Example.

更新
添加逻辑，考虑“如果它是多个”和“如果它不存在”。以防万一。

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;
            }
        }
    }
}