vueMultiSelect

Probably the most complete selecting solution for Vue.js, without jQuery.

Please note, this field depends on the following library:

• Vue-multiselect

Special properties of field

Property	Default	Accepted values	Description
values	none	Array or Function	List of items. It can be an array with items, or a function, what is resulted an array. The item can be a String or an object. You can use id and key (under selectOptions) to select any properties of that object as value or name.
max	none	Number	Number of allowed selected options.
selectOptions	{}	Object	Settings to select component. See details below.

selectOptions

For more details, see the official Vue-multiselect documentation.

Property	Default	Accepted values	Description
id	none	Integer or String	Used to identify the component in events.
multiple	false	Boolean	Equivalent to the multiple attribute on a input.
trackBy	none	String	Used to compare objects. Only use if options are objects.
label	none	String	Label from option Object, that will be visible in the dropdown.
searchable	true	Boolean	Add / removes search input.
clearOnSelect	true	Boolean	Clear the search input after selection. Use only when multiple is true.
hideSelected	false	Boolean	Hide already selected options
allowEmpty	true	Boolean	Allows to remove all selected values. Otherwise one must be left selected.
resetAfter	false	Boolean	Reset internal this.value, this.search, this.selected after this.value changes.
closeOnSelect	true	Boolean	Enable/disable closing after selecting an option
customLabel	none	Function => String	Function used to create a custom label
taggable	false	Boolean	Disable / Enable tagging
tagPlaceholder	'Press enter to create a tag'	String	String to show when highlighting a potential tag
optionsLimit	1000	Number	Limits the options displayed in the dropdown to the first X options.
groupValues	none	String	Name of the property containing the group values
groupLabel	none	String	Name of the property containing the group label
blockKeys	[]	Array	Array of keyboard key aliases to block when selecting
internalSearch	true	Boolean	Decide whether to filter the results based on search query. Useful for async filtering, where we search through more complex data.
selectLabel	'Press enter to select'	String	String to show when pointing to an option
selectedLabel	'Selected'	String	String to show next to selected option
deselectLabel	'Press enter to remove'	String	String to show when pointing to an already selected option
showLabels	true	Boolean	Decide whether to show labels on highlighted options
limit	99999	Number	Limit the display of selected options. The rest will be hidden within the limitText string.
limitText	count => `and ${count} more`	Function => String	Function that process the message shown when selected elements pass the defined limit.
loading	false	Boolean	Show/hide the loading spinner.
maxHeight	300	Integer	Sets max-height style value of the dropdown
showPointer	true	Boolean	Enable/disable highlighting of the pointed value.
onSearch	none	Function(searchQuery, id, options)	Emitted after the search query changes
onNewTag	none	Function(newTag, id, options, value)	Emitted after user attempt to add a tag

Usage

Simple select primitive:

{
  type: "vueMultiSelect",
  label: "Country",
  placeholder: "Select a country",
  model: "address.country",
  required: true,
  validator: validators.required,
  values: faker.definitions.address.country,
  selectOptions: {
    multiSelect: false,
    closeOnSelect: false,
    searchable: false,
    showLabels: false
  }
}

Simple select object:

{
  type: "vueMultiSelect",    
  model: "library",
  label: "Libraries",
  placeholder: "Select your favorite library",
  required: true, 
  validator: validators.required,
  selectOptions: {
    multiple: false,
    key: "name",
    label: "name",
    searchable: false,
    closeOnSelect: false,
    allowEmpty:false
  },
  values: [
    {
      "name": "Vue.js",
      "language": "JavaScript"
    },
    {
      "name": "Rails",
      "language": "Ruby"
    },
    {
      "name": "Sinatra",
      "language": "Ruby"
    }
  ]
}

Select with search:

{
  type: "vueMultiSelect",    
  model: "library",
  label: "Libraries",
  placeholder: "Select your favorite library",
  required: true,  
  validator: validators.required,
  selectOptions: {
    multiple: false,
    key: "name",
    label: "name",
    searchable: true,
    customLabel: function({ name, language }) {
      return `${name} — [${language}]`
    }
  },
  values: [
    {
      "name": "Vue.js",
      "language": "JavaScript"
    },
    {
      "name": "Rails",
      "language": "Ruby"
    },
    {
      "name": "Sinatra",
      "language": "Ruby"
    }
  ]
}

Multiselect with search:

{
  type: "vueMultiSelect",    
  model: "library",
  label: "Libraries",
  placeholder: "Select your favorite library",
  required: true, 
  validator: validators.required,
  selectOptions: {
    multiple: true,
    key: "name",
    label: "name",
    searchable: true,
    clearOnSelect: false,
    closeOnSelect: false,
    limit:2 // limits the visible results to 2
  },
  values: [
    {
      "name": "Vue.js",
      "language": "JavaScript"
    },
    {
      "name": "Rails",
      "language": "Ruby"
    },
    {
      "name": "Sinatra",
      "language": "Ruby"
    }
  ]
}

Asynchronous select:

{
  type: "vueMultiSelect",    
  model: "countries",
  label: "Countries ",
  placeholder: "Type to search",
  required: true,  
  validator: validators.required,
  selectOptions: {
    multiple: true,
    key: "code",
    label: "name",
    searchable: true,
    localSearch: false,
    clearOnSelect: false,
    closeOnSelect: false,    
    onSearch: function(searchQuery, id, options) {
      if (searchQuery.length === 0) {
        this.countries = []
      } else {
        this.isLoading = true
        setTimeout(() => {
          this.countries = countries.filter(function(element, index, array) {
            return element.name.toLowerCase().includes(searchQuery.toLowerCase())
          })
          this.isLoading = false
        }, 1000)
      }
    },
  },
  onChanged: function(model, newVal, oldVal, field) {
    model.selectedCountries = newVal    
  },    
  values: [
    {
      "name": "Vue.js",
      "language": "JavaScript"
    },
    {
      "name": "Rails",
      "language": "Ruby"
    },
    {
      "name": "Sinatra",
      "language": "Ruby"
    }
  ]
}

Tagging:

{
  type: "vueMultiSelect",    
  model: "library",
  label: "Libraries",
  placeholder: "Type to search or add tag",
  required: true,  
  validator: validators.required,
  selectOptions: {
    multiple: true,
    key: "code",
    label: "name",
    searchable: true,
    taggable: true,
    tagPlaceholder: "Add this as new tag",
    onNewTag: function(newTag, id, options, value){
      const tag = {
        name: newTag,
        // Just for example needs as we use Array of Objects that should have other properties filled.
        // For primitive values you can simply push the tag into options and selected arrays.
        code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
      }
      options.push(tag);
      value.push(tag);
    }
  },
  onChanged: function(model, newVal, oldVal, field) {    
    console.log('@tag: ', newVal);
  },    
  values: [
    {
      "name": "Javascript",
      "code": "js"
    },
    {
      "name": "Monterail",
      "code": "pl"
    },
    {
      "name": "Open Source",
      "code": "os"
    },
    {
      "name": "Vue.js",
      "code": "vu"
    }
  ]
}

CSS

You have to include the vue-multiselect CSS somewhere. It can be added as a static asset to your application, or inside a component. See here for details.

For example, to include in a component:

<template>
  <!-- template here -->
</template>
<script>
  // Script here
</script>

<!-- include the vue-multiselect CSS -->
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

<style>
  /* your styles here */
</style>