Select2 multi-sélection sans closeOnSelect chevauchements des résultats au-dessus des balises sélectionnés

Question

Problème:

Quand j'ai un select2() avec closeOnSelect =false, la liste des résultats chevauche les valeurs sélectionnées lorsque le pas de valeurs sélectionnées en sorte que les valeurs pour envelopper autour.

HTML:

<select multiple id="e1" style="width:300px"> 
    <option value="AL">Alabama</option> 
    <option value="AK">Alaska</option> 
    <option value="AZ">Arizona</option> 
    <option value="AR">Arkansas</option>... 
</select> 

Javascript:

$("#e1").select2({ 
    closeOnSelect: false 
}) 

Screenshot:

Fiddle:

http://jsfiddle.net/sajjansarkar/dsg2t7y2/

Answer 1

Sans beaucoup plus propre que la réponse de Sajjan. Vous pouvez appeler une fermeture et ouvrir dans l'événement de modification de la sélection. Cela provoque le redessin de la boîte sur chaque sélection sans avoir besoin de savoir quels noms de classes select2 utilise cette version (au cas où il changerait).

var select = $("#e1").select2({ 
    closeOnSelect: false 
}).on("change", function(e){ 
    select.select2("close"); 
    select.select2("open"); 
}); 

http://jsfiddle.net/dsg2t7y2/1/

Cela a l'avantage d'utiliser les mêmes méthodes select2 normalement utiliser pour positionner le menu déroulant. Donc si vous en avez sur la page qui se referme sur select, le look sera cohérent.

Sidenote: aussi ennuyeux soit-il, à la fois avec et sans cela, le scroller revient en haut après chaque sélection. shudders il me tue un peu

Answer 2

Une solution:

J'ai trouvé une façon de le résoudre, apprécierait d'autres suggestions.

Ajout d'un gestionnaire d'événements pour open et sélection d'événements qui repositionnent les résultats à chaque fois.

$("#e1").select2({ 
    closeOnSelect: false 
}).on('select2:select select2:open', function(evt) { 
    var $container = $(this).data("select2").$container.find(".select2-selection__rendered"); 
    var $results = $(".select2-dropdown--below"); 
    $results.position({ 
    my: "top", 
    at: "bottom", 
    of: $container 
    }); 
});; 

travail Fiddle:

http://jsfiddle.net/sajjansarkar/hvsvcc5r/

Screenshot: