vue-bootstrap-multiselect

Multiselect packages for Vue.js 2 by bootstrap 4 without jQuery

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-bootstrap-multiselect
1.0.137 years ago7 years agoMinified + gzip package size for vue-bootstrap-multiselect in KB

Readme

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.