Select2：如何在 VueJS 中的多个 select 中添加选项搜索字段

Question

我正在使用 VueJS 的 Select2 组件 https://www.npmjs.com/package/vue-select2

import VueSelect2 from "vue-select2";

我想添加一个选项以在显示的同一列表中进行搜索，作为单个 select 功能，不在同一输入中。

为什么在列表中？因为我将用文本“N options selected”替换 selected 项目并避免从输入本身搜索。

我需要的其他例子是这样的：https://semantic-ui-vue.github.io/#/modules/dropdown

我在中发现了一个类似的问题，但我不确定我是否需要这个，因为它不显示图像，而且它不是 VueJS 中的实现，我也不知道知道如何实施它。请参阅下图以及 HolaJan 的回复。

终于找到了Select2 for VueJS这部分的文档

但它对我也不起作用。

代码

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

Answer 1

您使用不当vue-select2。您安装了 vue-select2，但像 jquery-select2 一样使用它。阅读文档如何使用 vue-select2 Docs。 Javascript 片段如下：

export default {
  name: "Select2",
  components: {
    "vue-select": require("vue-select")
  },
  ...

HTML片段如下：

<vue-select 
   id="select2"
   :name="name"
   class="form-control"
   :searchable="true">
 </vue-select>

但我不推荐使用 vue-select2。 5年前发布，现在没有更新。

我推荐你使用这个包vue-select https://vue-select.org/ 因为比较流行，还在更新中。

这个https://github.com/shentao/vue-multiselect也不错select

Select2：如何在 VueJS 中的多个 select 中添加选项搜索字段

Select2: How to add option Search field in Multiple select in VueJS

javascript

jquery

vue.js

jquery-select2