vue-bootstrap-multiselect

vue-bootstrap-multiselect

The package may selected (one or many) options from list. Developed on Vue.js 2 and Bootstrap 4 without jQuery

Demo

JSFiddle

Achievements

• Control by keys in keyboard (arrow up/down, enter)
• Focused by TAB button
• Simple async-search (by url address) and complex async-search (by callback)
• Attaching (if you need) inputs to form with selected options
• Support short and long tags
• Support objects|array of base types (strings, numbers, etc)|array of objects as value
• Support images, search/stub, change-callback function, ect...

Install

npm install --save vue-bootstrap-multiselect

ES6

import Multiselect from 'vue-bootstrap-multiselect';
Vue.component('multiselect', Multiselect);

SDN

<link type="text/css" rel="stylesheet" href="https://unpkg.com/vue-bootstrap-multiselect/dist/vue-bootstrap-multiselect.min.css" /> 
<script type="text/javascript" src="https://unpkg.com/vue-bootstrap-multiselect/dist/vue-bootstrap-multiselect.min.js"></script> 

Setup

<div id="vue">
    // ... other html code 
    <component is="multiselect" :on-change="handleSelect"></component>
    // ... other html code
</div>

<script>
    const app = new Vue({
        el: '#vue',
        methods: {
            handleSelect(options) {
                console.log(options);
            }
        }
    })
</script>

Props

#attach-input

For example

<component is="multiselect" :attach-input="true" name="tags"></component>

Result

<input type="hidden" name="tags[]" value="1"/>
<input type="hidden" name="tags[]" value="2"/>
<input type="hidden" name="tags[]" value="3"/>

#value

For example 1

<component is="multiselect"
           :value='{
               "apple": "Яблоко",
               "banana": "Banana",
               "man": "Jon"
           }'
></component>

or

<component is="multiselect"
           :value='[
               {"id": "apple", "title": "Яблоко"},
               {"id": "banana", "title": "Banana"},
               {"id": "man", "title": "Jon"}
           ]'
></component>

Result 1

1. id = apple, title = Яблоко
2. id = banana, title = Banana
3. id = man, title = Jon

For example 2

<component is="multiselect" :value='["apple","banana","man"]'></component>

Result 2

1. id = apple, title = apple
2. id = banana, title = banana
3. id = man, title = man

For developers

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.