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

Posted 2023-02-22

【中文标题】Select2：如何在 VueJS 的多选中添加选项搜索字段

【英文标题】：Select2: How to add option Search field in Multiple select in VueJS

【发布时间】：2022-01-11 23:32:57

【问题描述】：

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

import VueSelect2 from "vue-select2";

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

为什么在列表中？因为我会将所选项目替换为文本“已选择 N 个选项”，并避免从输入本身进行搜索。

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

我在Enable select2 multi-select search box 发现了一个类似的问题，但我不确定我是否需要这个，因为它不显示图像，也不是 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>

【参考方案1】：

你错误地使用了vue-select2。您安装了vue-select2，但像jquery-select2 一样使用它。阅读文档如何使用 vue-select2 Docs。 javascript sn-ps如下：

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

html sn-ps如下：

<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也不错。

【讨论】：

感谢您的评论，特别是因为它是我们正在使用的当前组件，最好使用新组件。对于你提到的包 vue-select vue-select.org 或者另一个包，是否可以像我解释的那样在列表中添加一个搜索框？

是的，两个 plagins 都有搜索框。我喜欢 vue-multiselect 它的强大工具，具有许多功能。