如何移除Select2下拉框的输入搜索功能，改为纯下拉按钮？

要把带搜索功能的Select2多选框改成仅带下拉箭头的样式，只需通过配置项禁用搜索，再微调样式即可，具体步骤如下：

1. 修改Select2配置，彻底禁用搜索框 #

在初始化Select2时添加minimumResultsForSearch: Infinity参数——这个参数的逻辑是：只有当选项数量超过设定值时才显示搜索框，设为无穷大就会彻底隐藏搜索功能。

修改后的JS代码：

$('#js-select2').select2({
  placeholder: "Select your option",
  allowClear: true,
  minimumResultsForSearch: Infinity // 核心配置：禁用搜索框
});

2. 调整样式确保下拉箭头正常显示 #

默认禁用搜索后，多选框的箭头样式可能会偏移，可添加自定义CSS修正：

/* 给多选框添加原生风格的下拉箭头 */
.select2-container--default .select2-selection--multiple {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem; /* 给箭头预留空间 */
}

/* 强制隐藏下拉面板里的搜索区域（避免极端情况残留） */
.select2-search--dropdown {
  display: none !important;
}

完整可运行代码示例 #

<select class="" id="js-select2" multiple="multiple">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
  $('#js-select2').select2({
    placeholder: "Select your option",
    allowClear: true,
    minimumResultsForSearch: Infinity
  });
</script>

<style>
  .select2-container--default .select2-selection--multiple {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
  }

  .select2-search--dropdown {
    display: none !important;
  }
</style>

修改后，Select2多选框会变成右侧带下拉箭头的样式，点击箭头直接展开全部选项，不再显示搜索输入框。

内容的提问来源于stack exchange，提问作者Daniel el khal