VueJS中vue-select2多选组件下拉列表内添加搜索框的实现问题

问题描述 #

我正在使用VueJS的vue-select2组件，引入代码如下：

import VueSelect2 from "vue-select2";

我想要在多选展示的下拉列表中添加搜索功能，和单选模式的特性一致，而非在选择器输入框中搜索。

为什么要在列表中添加搜索？因为我后续会把选中项替换为“已选中N个选项”的文本，不需要从输入框直接搜索。

我查找过相关的技术问题，但现有方案都不是Vue实现，无法直接适配到我的项目中。相关效果参考如下：

我查阅了vue-select2的官方文档，按照文档添加搜索配置后没有生效。

我的原有代码如下：

<template>
  <select
    id="select2"
    :name="name"
    class="form-control"
    :searchable="true"
  ></select>
</template>
<script>
import VueSelect2 from "vue-select2";

export default {
  name: "Select2",
  props: {
    name: {
      type: String,
    },
    value: {
      type: Array,
      default: () => [],
    },
    callbackUrl: {
      type: String,
    },
    placeholder: {
      type: String,
      default: "All",
    },
    multiple: {
      type: Boolean,
      default: true,
    },
    resultsHandler: {
      type: Function,
      default: (data) => data,
    },
    parameterHandler: {
      type: Function,
      default: (params) => ({
        searchText: params.term,
        page: params.page,
      }),
    },
    
  },
  mounted: function () {
    var self = this;
    var placeholderDefault = this.placeholder;
    var options = {
      placeholder: this.placeholder,
      allowClear: true,
      ajax: {
        url: self.callbackUrl,
        dataType: "json",
        type: "POST",
        cache: false,
        data: function (params) {
          return self.parameterHandler(params);
        },
        processResults: function (data) {
          return self.resultsHandler(data);
        },
      },
      multiple: this.multiple,
      closeOnSelect: false,
      templateResult: function formatCountry(country) {
        if (!country.id) {
          return country.text;
        }
        var baseUrl = "https://cdn.ip2location.com/assets/img/flags/";
        var $country = $(
          '<span><img src="' +
            baseUrl +
            country.id.toLowerCase() +
            '.png" class="img-flag" /> ' +
            country.text.trim() +
            "</span>"
        );
        return $country;
      },
      templateSelection: function formatCountry(country) {
        if (!country.id) {
          return country.text;
        }
        var baseUrl = "https://cdn.ip2location.com/assets/img/flags/";
        var $country = $(
          '<span><img src="' +
            baseUrl +
            country.id.toLowerCase() +
            '.png" class="img-flag" /> ' +
            country.text.trim() +
            "</span>"
        );
        return $country;
      },
    $(this.$el).select2(options);
  
    $(this.$el).empty();
    for (var i = 0; i < self.$props.value.length; i++) {
      var value = self.$props.value[i];
      $(this.$el)
        .append(new Option(value.Name, value.ID, true, true))
        .trigger("change");
    }
  },
};
</script>

修复步骤 #

配置不生效是属性放置位置错误、语法缺失、样式未控制三个原因共同导致的，按以下步骤修改即可实现需求：

1. 移除无效属性
   删除<select>标签上的:searchable="true"，该属性不会被select2识别，所有配置需统一写在初始化的options对象内。
2. 补充核心配置
   在mounted的options对象中新增两个配置项：

var options = {
  // 原有配置不变
  searchable: true, // 开启全局搜索功能
  dropdownAutoWidth: true, // 下拉宽度自适应，避免搜索框挤压变形
}

3. 修改选中项展示逻辑
   替换原有templateSelection方法的实现，实现选中多个后显示“已选中N个选项”的效果：

templateSelection: function formatCountry(country) {
  const selectedList = $(self.$el).select2('data')
  // 选中数量大于1时显示统计文本
  if (selectedList.length > 1) {
    return `已选中${selectedList.length}个选项`
  }
  // 选中单个/无选中时保留原有展示逻辑
  if (!country.id) {
    return country.text;
  }
  var baseUrl = "https://cdn.ip2location.com/assets/img/flags/";
  var $country = $(
    '<span><img src="' +
      baseUrl +
      country.id.toLowerCase() +
      '.png" class="img-flag" /> ' +
      country.text.trim() +
      "</span>"
  );
  return $country;
}

4. 修复语法错误
   原有代码中options对象末尾缺少闭合的}，会导致初始化失败、配置不生效，需补充该符号。
5. 添加样式控制
   在组件内新增style块，通过深度选择器隐藏选择器本身的输入框，仅保留下拉列表顶部的搜索框：

<style scoped>
::v-deep .select2-selection--multiple .select2-search--inline {
  display: none !important;
}
::v-deep .select2-search--dropdown {
  display: block !important;
  padding: 8px;
}
</style>

内容的提问来源于stack exchange，提问作者Jota Pardo