Searchable Multi-Select Dual List Box For Vue

Install & Download:

# Yarn
$ yarn add vue-multiselect-listbox
# NPM
$ npm i vue-multiselect-listbox

Description:

A customizable and searchable dual list box component to enhance multi-select experience on the app.

How to use it:

1. Import the Multi-Select Dual List Box.

import Vue from 'vue'
import MultiselectListbox from 'vue-multiselect-listbox'
import 'vue-multiselect-listbox/dist/vue-multi-select-listbox.css';

2. Register the component.

Vue.component('v-multiselect-listbox', vMultiselectListbox)

3. Add the component to the template and define the options in a JS array or an array of objects.

<v-multiselect-listbox 
  :options="['Option 1', 'Option 2']">
</v-multiselect-listbox>
// or
<v-multiselect-listbox 
  :options="[{label: 'Option 1', language: 'js'}, {label: 'Option 2', language: 'css'}]"
  :reduce-display-property="(option) => option.label"
  :reduce-value-property="(option) => option.language"
</v-multiselect-listbox>

4. All possible props.

value: {
  type: Array,
  default() {
    return [];
  },
},
options: {
  type: Array,
  default() {
    return [];
  },
},
searchOptionsPlaceholder: {
  type: String,
  default() {
    return 'Search';
  },
},
selectedOptionsPlaceholder: {
  type: String,
  default() {
    return 'Search';
  },
},
reduceDisplayProperty: {
  type: Function,
  default: (value) => value,
},
reduceValueProperty: {
  type: Function,
  default: (value) => value,
},
noOptionsText: {
  type: String,
  default: '',
},
selectedNoOptionsText: {
  type: String,
  default: 'Select',
},
noOptionsFoundText: {
  type: String,
  default: 'No options found',
},
noSelectedOptionsFoundText: {
  type: String,
  default: 'No options found',
},
showSelectAllButtons: {
  type: Boolean,
  default: true,
},
searchInputClass: {
  type: String,
  default: '',
}
hideSearchInputs: {
  type: Boolean,
  default: false,
},