2016-07-11 7 views
2

Ich möchte es den Benutzern erleichtern, alle Übereinstimmungen auszuwählen, wenn Sie select2 verwenden.Alle Treffer mit select2 hinzufügen 4.0.3

der vorhandene Code

Im Moment habe ich den folgenden Code verwenden select2 4.0.3 und 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(); 

Eine vollständige jsfiddle des Codes https://jsfiddle.net/rwinch/t7112qcc/5/

Verhalten Ich wünsche

Kann mir jemand den obigen Code zu ändern, hilft dem Benutzer zu ermöglichen, auf einfache Weise alle Spiele auszuwählen. Zum Beispiel, wenn der Bildschirm wie folgt aussieht:

enter image description here

Und drückt der Benutzer STRG + A und dann eingeben, dann ist das Ergebnis:

enter image description here

+0

Hat bei mir nicht in Chrome 52 – Rayon

+0

@Rayon Was passieren passieren verlassen haben oder nicht? Wenn Sie sagen, dass es nicht die Werte auswählt, die übereinstimmen, dann wird das ja erwartet. Ich habe gerade versucht, den Code zur Verfügung zu stellen, den ich gerade habe (keine Lösung). Ich habe meine Frage aktualisiert, um dies deutlicher zu machen. –

+0

_ "Ergebnis ist" _ oder _ "Ergebnis sollte" _? Sehr geehrte, Bitte erwähnen Sie, was passiert und was Sie erwarten zu passieren ... – Rayon

Antwort

5

ich Ihre Geige gegabelt haben, so können Sie es versuchen hier: 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>

ich die Kommentare alle im Code

+0

Danke! Obwohl dies nicht die offiziellen APIs verwendet, vermute ich nicht, dass dies derzeit mit der select2-Dokumentation möglich ist. –

+0

Ja, tut es nicht, weil ich keine Optionen dafür gefunden habe. Also meine Lösungen sind irgendwie hacky, aber es funktioniert. –

Verwandte Themen