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(); 

コードhttps://jsfiddle.net/rwinch/t7112qcc/5/

行動の完全なjsfiddleは、私は誰かが、ユーザーが簡単にすべての一致を選択できるように上記のコードを修正するために私を助けることができる

を望みます。例えば、画面は次のように見える場合：

、ユーザーはCTRL + Aを押し、入力して、その結果は次のとおりです。

Answer 1

私はあなたのフィドルをフォークしてきました、あなたはここでそれを試すことができます：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>

私は