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

Name	Type	Default	Description
name	String	-	The multiselect name on form
is-multi	Boolean	false	Determines whether multiple options can be selected
stub-placeholder	String	Select option	Placeholder of stub (where search is off)
is-search	Boolean	true	Enable or disable searching by list of options
placeholder	String	Start typing...	Placeholder for input search
async-search-callback	Function	-	Complex search callback for manual search by query
async-search-url	String	-	Simple search URL for GET request and pulling JSON string
value	Array or Object	[]	Selected options
all-values	Array or Object	[]	Default options for dropdown list
option-title-name	String	title	Name for title field of option
option-image-name	String	image	Name for image link field of option
option-key-name	String	id	Name for id field of option
short-tags	Boolean	false	Enable or disable short tags (default - long tags)
attach-input	Boolean	false	Enable attached hidden inputs for form
on-сhange	Function	null	Selected-callback. Called each time you select options
no-results-placeholder	String	No results	Dropdown list placeholder for empty result

#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.