1.0.13 • Published 7 years ago
vue-bootstrap-multiselect v1.0.13
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
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.
1.0.13
7 years ago
1.0.12
7 years ago
1.0.11
7 years ago
1.0.10
7 years ago
1.0.9
7 years ago
1.0.8
7 years ago
1.0.7-beta.4
7 years ago
1.0.7-beta.3
7 years ago
1.0.7-beta.2
7 years ago
1.0.7-beta1
7 years ago
1.0.6
7 years ago
1.0.5
7 years ago
1.0.4
7 years ago
1.0.2
7 years ago
1.0.1
7 years ago
1.0.0
7 years ago