Select2 下拉菜单低于主下拉菜单答案

【问题标题】：Select2 dropdown goes below main dropdownSelect2 下拉菜单低于主下拉菜单
【发布时间】：2021-10-14 18:36:48
【问题描述】：

我正在使用一个从后端获取数据的 select2 下拉菜单，效果很好。然而，网站的设计是自定义的，我在自定义搜索框之上使用它，如图所示：

Select2 下拉菜单位于我的主搜索框下方。我想在上方输入而不是下方的下拉列表中写入搜索条件。我尝试将 minimumResultsForSearch: -1 属性添加到我的 select2 声明中，但这只会隐藏下面的搜索栏，因此根本无法编写任何条件。这是我的 HTML：

<div class="row g-0 justify-content-center">
    <form class="col-12 col-sm-11 col-md-10 col-lg-7 main-search">
        <div class="input-group">
            <select class="form-control" id="search-box">
                <option value="0" selected="selected">Search...</option>
            </select>
            <button class="btn btn-primary" type="button">Search</button>
        </div>
    </form>
</div>

【问题讨论】：

标签： html jquery-select2

【解决方案1】：

这是 select2 的默认设置，要更改它，您可以执行以下操作：

$(".js-example-basic-single").select2({
  placeholder: 'Search your favourite movie'
});

.js-example-basic-single {
  width: 200px;
}

.select2.select2-container {
  top: -4px;
}

.select2.select2-container .select2-selection--single {
  height: 50px;
  border-radius: 0;
}

.select2.select2-container .select2-selection--single:focus {
  outline: none;
}

.select2.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 50px;
}

.select2.select2-container .select2-selection--single .select2-selection__arrow {
  display: none;
}

.select2-container--default.select2-container--open {
  top: 6px !important;
}

.select2-container--default .select2-dropdown--below {
  top: -4px;
}

.select2-container--default .select2-search--dropdown {
  padding: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  height: 48px;
  border: 0;
  border-bottom: 1px solid #aaa;
  padding: 10px;
  box-sizing: border-box;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="js-example-basic-single" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

【讨论】：