select2で検索ボックスを移動する

Question

検索ボックスをselect2に移動しようとしています。選択が上に開いているときに結果の下部に、下にあるときに上に表示されます。

それは基本的に次のようになります。私は次のことを試してみましたし、可動部の作品が、私は適切なイベントにアタッチする方法を見つけることができませんCNA

。ページをスクロールしてselectを上から下に移動すると、select2：openイベントにアタッチされているため、検索ボックスは元に戻りません。

select2が移動するたびに検索ボックスの位置を変更できることを確認するためのイベント（レンダリングのようなもの）がありますか？

OR

私はSELECT2は上記と上部に開いたとき、それは以下開いたときに、常に下になるように検索ボックスを移動するにはどうすればよい？

このhttps://codepen.io/anon/pen/ZaxZOaではスニペットよりも優れています。こちらもスクロールできるためです。

$(document).ready(function() { 
 
\t $('.js-example-basic-single').select2(); 
 
    
 
    //$('.select2-results').insertAfter('.select2-search--dropdown'); 
 
    
 
    $('.js-example-basic-single').on('select2:open', function(){ 
 
    
 
    $('.select2-dropdown--above .select2-search--dropdown').insertAfter('.select2-results'); 
 
    }); 
 
    
 
});

.form-control { 
 

 
\t width: 360px; 
 
\t height: 34px; 
 
\t padding: 6px 12px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script> 
 

 
<h1>Select2</h1> 
 

 
<div class="col"> 
 

 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
    
 
<label for="js-example-basic-single">Select2: select a US state</label><br> 
 
<select class="js-example-basic-single form-control" id="js-example-basic-single"> 
 

 
<optgroup label="Alaskan/Hawaiian Time Zone"> 
 
<option value="AK">Alaska</option> 
 
<option value="HI">Hawaii</option> 
 
</optgroup> 
 
<optgroup label="Pacific Time Zone"> 
 
<option value="CA">California</option> 
 
<option value="NV">Nevada</option> 
 
<option value="OR">Oregon</option> 
 
<option value="WA">Washington</option> 
 
</optgroup> 
 
</select> 
 

 
</div>

Answer 1

私は、CSSのフレキシボックスでこれを解決しました。 selct2をフレックスにしてから、検索と結果divの順序を変更します。

.select2-dropdown--above{ 
 
    display: flex; flex-direction: column; 
 
} 
 
.select2-dropdown--above .select2-search--dropdown{ 
 
    order: 2; 
 
} 
 
.select2-dropdown--above .select2-results { 
 
order: 1; 
 
} 
 

 
.select2-dropdown--below{ 
 
    display: flex; flex-direction: column; 
 
} 
 
.select2-dropdown--below .select2-search--dropdown{ 
 
    order: 1; 
 
} 
 
.select2-dropdown--below .select2-results { 
 
order: 2; 
 
}