javascript - 使用 select2 4.0.3 添加所有匹配项

Question

我想让用户在使用 select2 时更容易选择所有匹配项。

现有代码

我目前有以下代码使用 select2 4.0.3 和 jquery 1.11。

<select class="js-example-basic-multiple" multiple="multiple">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="WY">Wyoming</option>
</select>

$(".js-example-basic-multiple").select2();

代码的完整jsfiddle https://jsfiddle.net/rwinch/t7112qcc/5/

我想要的行为

谁能帮我修改上面的代码，让用户轻松选择所有匹配项。例如，如果屏幕看起来像:

然后用户按下CTRL+A然后回车，那么结果是:

Answer 1

我已经 fork 了你的 fiddle ，所以你可以在这里试试:https://jsfiddle.net/alienpavlov/z34qczr6/1/

$(".js-example-basic-multiple").select2();

$(document).on('keyup', ".select2-search__field", function(e) {
    //if Ctrl+A pressed
    if (e.keyCode == 65 && e.ctrlKey) {
        //Select only filtered results
        $.each($(".select2-results__options").find('li'), function(i, item) {
            $(".js-example-basic-multiple > option:contains('" + $(item).text() + "')").prop("selected", "selected");
        });
        //Remove entered letters and close suggestions
        $(this).val("").click();
        //Select with select2
        $(".js-example-basic-multiple").trigger("change");
    }
});

select {
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<p>
    I'd like an easy way for users to add all matches. For example the user
</p>
<ul>
    <li>Enters "A"</li>
    <li>Presses CTRL+A or Meta+A all matches are selected</li>
    <li>Presses enter all matches are added</li>
</ul>
<select class="js-example-basic-multiple" multiple="multiple">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="WY">Wyoming</option>
</select>

我已经把所有的注释都留在了代码中