在select2

Question

我正在尝试在select2中移动搜索框，以便当select在上面打开时它将显示在结果的底部，而当select2在下面打开时它将显示在顶部。

基本上应该是这样的：

我尝试过以下操作，虽然移动部件有效，但我找不到将其附加到正确事件的方法。如果你滚动页面并从上面选择go to belove，搜索框将不会改回来，因为它被附加到select2：open事件。

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

或

当select2在上方打开时，如何将搜索框移动到底部，在下面打开时，如何将搜索框移到顶部？

你可以在这个https://codepen.io/anon/pen/ZaxZOa中看到它比片段更好，因为你也可以在这里滚动。

＆＃13;

＆＃13;

$( 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');
  });
  
});

＆＃13;

.form-control {

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;