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

Question

I'm usign the Select2 component from VueJS https://www.npmjs.com/package/vue-select2

import VueSelect2 from "vue-select2";

I want to add an option to search in the same list that is displayed, as the single select feature, not in the same input.

Why in the list? Because I will replace the selected items with a text "N options selected" and avoid searching from the input itself.

Other example I need is something like this: https://semantic-ui-vue.github.io/#/modules/dropdown

I found a similar question in Enable select2 multi-select search box, but I'm not sure if this exact I need, because it does not show an image, also it is not an implementation in VueJS and I don't know how to implement it. See the following image with the response by HolaJan.

Finally, I looked for the documentation of the Select2 for VueJS this part

but it didn't work for me either.

Code

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

Vitaliy Rayets · Accepted Answer · 2021-12-07 16:56:12Z

1

You incorrect use vue-select2. You install vue-select2 but use it like jquery-select2. Read docs how use vue-select2 Docs. The Javascript snippets are as follows:

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

The HTML snippets are as follows:

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

but i don't recommended use vue-select2. It's published 5 years ago without updates now.

I recommended you to use this package vue-select https://vue-select.org/ because it is more popular and is still being updated.

Also this https://github.com/shentao/vue-multiselect good select too.

edited Dec 7, 2021 at 16:56

answered Dec 7, 2021 at 16:43

Vitaliy Rayets

2,4041 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jota Pardo Over a year ago

I aprecciate your comment, specially because it is the current component we are using and it is better to use a new one. In the case of the package vue-select vue-select.org you mentioned or the another one, is it possible to add a search box in the list as I explained?

Vitaliy Rayets Over a year ago

Yes, both plagins have search box. I like vue-multiselect it’s power tool with many features.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related