vue-bootstrap-multiselect
The package may selected (one or many) options from list. Developed on Vue.js 2 and Bootstrap 4 without jQuery
Demo
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
;Vue;
SDN
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
#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
- id = apple, title = Яблоко
- id = banana, title = Banana
- id = man, title = Jon
For example 2
<component is="multiselect" :value='["apple","banana","man"]'></component>
Result 2
- id = apple, title = apple
- id = banana, title = banana
- id = man, title = man
For developers
# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report
For detailed explanation on how things work, checkout the guide and docs for vue-loader.