在select2中移动搜索框

Question

我试图将搜索框移动到select2中，以便在select上方打开时它将出现在结果的底部，而select2在下方打开时将出现在结果的顶部。

它基本上应该看起来像这样：

我已经尝试了以下方法，尽管活动部分有效，但我无法找到将其附加到适当事件的方法。 如果滚动页面，并且选择从上方转到被爱，则搜索框将不会退回，因为它已附加到select2：open事件。

是否有一个事件（例如渲染）可以用来确保每次select2移动时都可以更改搜索框的位置？

要么

在select2上方打开时，如何将搜索框始终移动到底部？

您可以在https://codepen.io/anon/pen/ZaxZOa中看到比片段更好的内容，因为您也可以在此处滚动。

 $( document ).ready( function() { $( '.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 { width: 360px; height: 34px; 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 flexbox解决了这个问题。 使selct2为flex，然后更改搜索和结果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; }