Searchable Multi-Select Dual List Box For Vue

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

Preview:

Changelog:

v0.4.0 (03/30/2023)

• return empty object if group property is null

v0.3.0 (12/22/2022)

• Add disabled and readonly state

v0.2.6 (10/17/2022)

• Add option to hide inputs

v0.2.5 (04/28/2022)

• reset changed items

v0.2.4 (04/27/2022)

• bugfix

Download Details:

Author: abhimediratta

Live Demo: https://abhimediratta.github.io/vue-multiselect-listbox/

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

Official Website: https://github.com/abhimediratta/vue-multiselect-listbox

Install & Download:

# Yarn
$ yarn add vue-multiselect-listbox

# NPM
$ npm i vue-multiselect-listbox