保持 select2 仅在 shift-select 时打开

Question

我使用 select2 添加标签。有一个选项可以让 select 列表在 select 一个项目 (closeOnSelect) 时保持打开状态，但是只有在 select 时按下 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.

已更新
添加逻辑，考虑 "If it's multiple" 和 "If it isn't present"。以防万一

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

保持 select2 仅在 shift-select 时打开

Keep select2 open only on shift-select

javascript

jquery

jquery-plugins

jquery-select2