Universal Multiple Select Component For Vue.js

A universal multiple select, tagging/tokenizer component for Vue.js 2+ app.

Features:

• NO dependencies
• Single select
• Multiple select
• Tagging
• Dropdowns
• Filtering
• Search with suggestions
• Logic split into mixins
• Basic component and support for custom components
• V-model support
• Vuex support
• Async options support
• > 95% test coverage
• Fully configurable

Basic Usage:

<div id="app">
  <multiselect 
    v-model="value" 
    :options="options"
    :multiple="true"
    track-by="library"
    :custom-label="customLabel"
    >
  </multiselect>
  <pre>{{ value }}</pre>
</div>

new Vue({
	components: {
  	Multiselect: window.VueMultiselect.default
	},
	data: {
  	value: { language: 'JavaScript', library: 'Vue-Multiselect' },
  	options: [
    	{	language: 'JavaScript', library: 'Vue.js' },
      { language: 'JavaScript', library: 'Vue-Multiselect' },
      { language: 'JavaScript', library: 'Vuelidate' }
    ]
	},
  methods: {
  	customLabel (option) {
      return `${option.library} - ${option.language}`
    }
  }
}).$mount('#app')

Available props.

/**
 * name attribute to match optional label element
 * @default ''
 * @type {String}
 */
name: {
  type: String,
  default: ''
},
/**
 * String to show when pointing to an option
 * @default 'Press enter to select'
 * @type {String}
 */
selectLabel: {
  type: String,
  default: 'Press enter to select'
},
/**
 * String to show when pointing to an option
 * @default 'Press enter to select'
 * @type {String}
 */
selectGroupLabel: {
  type: String,
  default: 'Press enter to select group'
},
/**
 * String to show next to selected option
 * @default 'Selected'
 * @type {String}
 */
selectedLabel: {
  type: String,
  default: 'Selected'
},
/**
 * String to show when pointing to an already selected option
 * @default 'Press enter to remove'
 * @type {String}
 */
deselectLabel: {
  type: String,
  default: 'Press enter to remove'
},
/**
 * String to show when pointing to an already selected option
 * @default 'Press enter to remove'
 * @type {String}
 */
deselectGroupLabel: {
  type: String,
  default: 'Press enter to deselect group'
},
/**
 * Decide whether to show pointer labels
 * @default true
 * @type {Boolean}
 */
showLabels: {
  type: Boolean,
  default: true
},
/**
 * Limit the display of selected options. The rest will be hidden within the limitText string.
 * @default 99999
 * @type {Integer}
 */
limit: {
  type: Number,
  default: 99999
},
/**
 * Sets maxHeight style value of the dropdown
 * @default 300
 * @type {Integer}
 */
maxHeight: {
  type: Number,
  default: 300
},
/**
 * Function that process the message shown when selected
 * elements pass the defined limit.
 * @default 'and * more'
 * @param {Int} count Number of elements more than limit
 * @type {Function}
 */
limitText: {
  type: Function,
  default: count => `and ${count} more`
},
/**
 * Set true to trigger the loading spinner.
 * @default False
 * @type {Boolean}
 */
loading: {
  type: Boolean,
  default: false
},
/**
 * Disables the multiselect if true.
 * @default false
 * @type {Boolean}
 */
disabled: {
  type: Boolean,
  default: false
},
/**
 * Fixed opening direction
 * @default ''
 * @type {String}
 */
openDirection: {
  type: String,
  default: ''
},
/**
 * Shows slot with message about empty options
 * @default true
 * @type {Boolean}
 */
showNoOptions: {
  type: Boolean,
  default: true
},
showNoResults: {
  type: Boolean,
  default: true
},
tabindex: {
  type: Number,
  default: 0
}

Preview:

Changelog:

v2.1.7 (01/20/2023)

• Removed spellcheck from search field
• Make select group respect closeOnSelect property
• Make “index” available in options list elements
• Add class when has-option-group
• Added new option to prevent autofocus on input search
• Fixes bugs

Download Details:

Author: shentao

Live Demo: https://vue-multiselect.js.org/#examples

Download Link: https://github.com/shentao/vue-multiselect/archive/master.zip

Official Website: https://github.com/shentao/vue-multiselect

Install & Download:

# NPM
$ npm install vue-multiselect --save

# Bower
$ bower install vue-multiselect --save