在select2中移动搜索框

Question

我正在尝试将搜索框移动到 select2 中，这样当 select 打开时它将出现在结果的底部，当 select2在下面打开。

基本上应该是这样的：

我尝试了以下方法，虽然移动部分有效，但我找不到将其附加到正确事件的方法。如果您滚动页面并且 select 从上方转到 belove，则搜索框不会变回原样，因为它附加到 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; 
}

在select2中移动搜索框

Move the search box in a select2

javascript

jquery-select2

jquery-select2-4