shentao/vue-multiselect

Universal select/multiselect/tagging component for Vue.js

vue-multiselect

Documentation for version 3

Documentation for v3.0.0 is almost the same as for v2.x as it is mostly backward compatible. For the full docs for v3 and previous versions, check out: vue-multiselect.js.org

Sponsors

Features & characteristics:

• NO dependencies
• Single select
• Multiple select
• Tagging
• Dropdowns
• Filtering
• Search with suggestions
• Logic split into mixins
• Basic component and support for custom components
• V-model support
• Vuex support
• Async options support
• Fully configurable (see props list below)

Install & basic usage

npm install vue-multiselect@next

<template>
  <div>
    <VueMultiselect
      v-model="selected"
      :options="options">
    </VueMultiselect>
  </div>
</template>

<script>
import VueMultiselect from 'vue-multiselect'
export default {
  components: { VueMultiselect },
  data () {
    return {
      selected: null,
      options: ['list', 'of', 'options']
    }
  }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>

JSFiddle

Example JSFiddle – Use this for issue reproduction.

Examples

Single select / dropdown

<VueMultiselect
  :model-value="value"
  :options="source"
  :searchable="false"
  :close-on-select="false"
  :allow-empty="false"
  @update:model-value="updateSelected"
  label="name"
  placeholder="Select one"
  track-by="name"
/>

Single select with search

<VueMultiselect
  v-model="value"
  :options="source"
  :close-on-select="true"
  :clear-on-select="false"
  placeholder="Select one"
  label="name"
  track-by="name"
/>

Multiple select with search

<VueMultiselect
  v-model="multiValue"
  :options="source"
  :multiple="true"
  :close-on-select="true"
  placeholder="Pick some"
  label="name"
  track-by="name"
/>

Tagging

with @tag event

<VueMultiselect
  v-model="taggingSelected"
  :options="taggingOptions"
  :multiple="true"
  :taggable="true"
  @tag="addTag"
  tag-placeholder="Add this as new tag"
  placeholder="Type to search or add tag"
  label="name"
  track-by="code"
/>

addTag (newTag) {
  const tag = {
    name: newTag,
    code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
  }
  this.taggingOptions.push(tag)
  this.taggingSelected.push(tag)
},

Asynchronous dropdown

<VueMultiselect
  v-model="selectedCountries"
  :options="countries"
  :multiple="multiple"
  :searchable="searchable"
  @search-change="asyncFind"
  placeholder="Type to search"
  label="name"
  track-by="code"
>
  <template #noResult>
    Oops! No elements found. Consider changing the search query.
  </template>
</VueMultiselect>

methods: {
  asyncFind (query) {
    this.countries = findService(query)
  }
}

Special Thanks

Thanks to Matt Elen for contributing this version!

A Vue 3 upgrade of @shentao's vue-mulitselect component. The idea is that when you upgrade to Vue 3, you can swap the two components out, and everything should simply work. Feel free to check out our story of how we upgraded our product to Vue 3 on our blog at suade.org

Contributing

# distribution build with minification
npm run bundle

# run unit tests
npm run test

vue-multiselect's Issues

Browserify and/or Laravel Elixir issue

Hello there,

I'm using the mentioned to process my js files and I get this error:

Browserify Failed!: [BABEL] /data/www/node_modules/vue-multiselect/lib/vue-multiselect.js: Unknown option: direct.presets while parsing file: /data/www/node_modules/vue-multiselect/lib/vue-multiselect.js
{ [ReferenceError: [BABEL] /data/www/node_modules/vue-multiselect/lib/vue-multiselect.js: Unknown option: direct.presets while parsing file: /data/www/node_modules/vue-multiselect/lib/vue-multiselect.js]
filename: '/data/www/node_modules/vue-multiselect/lib/vue-multiselect.js',
stream:
Labeled {
_readableState:
ReadableState {
highWaterMark: 16,
buffer: [],
length: 0,
pipes: [Object],
pipesCount: 1,
flowing: true,
ended: false,
endEmitted: false,
reading: true,
sync: false,
needReadable: true,
emittedReadable: false,
readableListening: false,
objectMode: true,
defaultEncoding: 'utf8',
ranOut: false,
awaitDrain: 0,
readingMore: false,
decoder: null,
encoding: null,
resumeScheduled: false },
readable: true,
domain: null,
_events:
{ end: [Object],
error: [Object],
data: [Function: ondata],
_mutate: [Object] },
_eventsCount: 4,
_maxListeners: undefined,
_writableState:
WritableState {
highWaterMark: 16,
objectMode: true,
needDrain: false,
ending: true,
ended: true,
finished: true,
decodeStrings: true,
defaultEncoding: 'utf8',
length: 0,
writing: false,
corked: 0,
sync: false,
bufferProcessing: false,
onwrite: [Function],
writecb: null,
writelen: 0,
buffer: [],
pendingcb: 0,
prefinished: true,
errorEmitted: false },
writable: true,
allowHalfOpen: true,
_options: { objectMode: true },
_wrapOptions: { objectMode: true },
_streams: [ [Object] ],
length: 1,
label: 'deps' } }

Any advice?

onChange is not called if the values somehow result in the initial configuration

problem: i'm persisting the changes on every onChange via ajax.
If you add a value then onChange is called and i'm persisting via ajax.
If you remove that option again onChange is not called again.

It seems that is only compares with the initial config instead of the current one.

Vue 2.0 compatibilty issues [THREAD]

When form (fieldset) is set to 'disabled', the dropdown is still active

First of all thank you for this component, it's pretty helpful.

My problem is that I want to disable a whole form (when submitting via ajax for ex).
I would put a disabled attribute to a form fieldset, then all inputs/buttons/etc... are supposed to be 'readonly' in that state.

But multiselect is still fully active. For example, when clicking the right arrow, the dropdown is shown.

I looked in the source, but did not see anything related to this.

Any suggestion?

Cannot read property 'length' of undefined (this.search)

I've faced the following error:

vue.common.js:1019 [Vue warn]: Error when evaluating expression "filteredOptions.length === 0 && search.length": TypeError: Cannot read property 'length' of undefined (found in component: <multiselect>)

Changing v-show="filteredOptions.length === 0 && search && search.length" to v-show="filteredOptions.length === 0 && search && search.length" seems could fix it.

For now I just override the template.

Can I set the limit of selection?

When using tagging and multiselect options, can I set the limit of number of selected and created tags?
If I can do so, I want to stop working ajax searching, creating new tags, and show notice that means like "You cannot select and create tags anymore" when the number of inputting tags reaching the limit.

Document how to override CSS styles

I'm trying to get a very simple select element to my Vue app which uses ES6 and node ( using require('vue-multiselect') ) and adding the component straight to my main Vue instance. It seems extremely hard to override the default styles, which fail monumentally when just adding multiselect-element to the html template that uses plain bootstrap styles (see attached screenshot of the element).

It would be nice to have clear instructions on how to override the default styles, or better yet, default styles that would work without much tweaking :)

Let me know if I can help!

ComboBox feature?

I realized there is tagging for multiselect but for single select I would think it might be great to have a tagging like feature that you can choose the dropdown menu option or enter one that isn't in the options.

Error on gulp --production

Hi, I'm facing this error while trying to run gulp --production [complies fine when running gulp --dev].
Using elixir and mix.webpack()
Elixir version: ^4.2.0
Gulp version: 3.8.8
npm version: 2.14.12
nodejs version: v4.2.4

Error on console:
`- public\js\app.js

events.js:141
throw er; // Unhandled 'error' event
^
Error
at new JS_Parse_Error (:1526:18)`

Thanks in advance for the help!

integration with vue-validator

is there a way to integrate vue-validator with vue-multiselect ?

Font of placeholder is not scaled properly

Problemm with getOptionLabel

Hi.

I have a small problem

This is my template

<multiselect
:on-search-change="getUsers | debounce 200"
:selected.sync="newOwners"
:options="users"
:searchable="searchable"
:clear-on-select="false"
placeholder="Search users..."
label="label"
key="value"
class="form-control col-md-10">
</multiselect>

What am I doing wrong?

Only thing missing... Grouping?

Awesome work! thank you. One important feature I'm looking for to
start using this plugin would be grouping, similar to SELECTIZE, etc..
where I'd be able to visually split the 'options' in the dropdown
by categories, very important in my specific case.
Any plans on implementing something like this? or maybe it already
is and I completely missed it in the docs..?!
Thanks

Scroll Broken in Chrome

First off, great project! I seem to be having a little problem with scrolling though.

Problem: Can not scroll through options list by using mouse to drag scroll bar. You have to use the mouse wheel.

Environment:
vue-multiselect: "^0.2.3"
NodeJS 4.X
OS: Windows
Browser: Chrome Version 51.0.2704.84 m
No external styles being used.

Gif of problem:

I tried this on the Edge browser and it worked just fine! Must be something specific to chrome.

Wrong data binding in example app

:selected prop must be .sync. Two way data binding is required to retrieve value from component.

Getting style conflicts?

Hello,

I'm trying to use vue-multiselect in a bootstrap based template. Out of the box, it looks like this:

The select box is smaller, texts is partially hidden... So I'm thinking there might be some conflict with bootstrap styles? Have anyone encountered this?

I'm starting to get into Vue, so, any pointer to help me dig around this issue and try to fix it is welcomed! ;-)

Is tagging possible?

Good work, looks really great!
Was just wondering if tagging is possible, so creating an item that is not already available in the options.

Custom Vue delimiters not obeyed

In my app, I use [[ ]] as Vue delimiters instead of {{ }}. Upon trying to use vue-multiselect, the options displayed in the dropdown are all {{ getOptionLabel(option) }} since Vue isn't using the curly braces.

How do i populate the dropdown after the user has entered something and press enter

Hi,
I am trying to implement the case where the component acts as a traditional search box. Once when the user has entered something and pressed the enter button , I would like to use the user's input criteria as the search parameter and pass it to the API. The API would then return me all the values based on the user's search criteria. Now, the API is ready, but I am not sure how to use vue-multiselect to perform that kind of operation. Can you please help me out with this ?

I keep getting this error : "No Elements Found. Consider changing your search query"

        <multiselect 
            :selected.sync="selected" 
            :options="booksArray" 
            :on-search-change="getBooks"
            placeholder="Type to search" 
            label="BookCode" 
            key="BookID">
        </multiselect>

<script>
    import Multiselect from 'vue-multiselect'
    export default {
        data () {
            return {
                booksArray:[],
                selected:null, 
            }
        },
        created () {
            console.log('going to create the object');
        },
        methods : {
            getBooks (item) {
                console.log('search item : '+item);
                this.$http.get('bookApiService').then(response => {
                    this.booksArray = response.data.resource;
                    console.log(this.booksArray.length);
                    console.log(JSON.stringify(this.booksArray));
                })
            } 
        }, 
        components: {Multiselect}
    }
</script>

Thank you for your time and patience.

With Regards
Gagan

Don't show multiselect__option if empty options

Is there a way to hide the option span if their is no options or if the user didn't start typing yet ?

You can check the search bar in http://krekib.com for a better perspective.

on-search-change event is not that useful

As I'm using on-search-change event, the main intention is to load options from the server. But it doesn't suit the task. Here's why.

on-search-change event triggers:

1. Page ready.
2. Parent selected prop externally changed.
3. User clicked on component (triggers 2 times).
4. User types any letter

load-options event should trigger:

1. User clicked on component (once).
2. User types any letter

This is okeyish when you have one select on page. And not so much with ton of forms.

Hence, I humbly propose to deprecate on-search-change and implement load-options. And I'm willing to shoulder the task if help is wanted.

[Help wanted] Multiple select field with predefined options problem

Hello,

I have a page on which I can have a non fixed number of multiselect element. Basically, the "create" version of the page, to create an entry, works flawlessly. But, the "edit" version is causing me some trouble: I assign the value found in the database on the ready() method of the page's component (in which the multiselects are).

You can see in the image below what happens:

The last one always works: it's set, and I can select new values. But for all the ones before the value are set, but they are stuck with a loading icon and I can't do anything with them. Trying to search for a new value seems to work (if I console.log the search results, they show), but they won't appear in the multiselect search box.

I can recall something like this in the doc, or in issues (was it even myself? hehe), that could help, but I can't seem to be able to find it, so... Any help welcome ! :) 🎱

Consider not using 'let'

I was having issues running my code in FireFox and traced the issue back to the use of 'let' in this plugin. My FF was a couple of versions out of date and I noticed support for let is still not great, it was only supported in Chrome/FF as of a couple of versions ago and Safari/IE 10 has no support for it.

http://caniuse.com/#feat=let

Would you consider not using let so this plugin can support older browsers?

newly created tags arent getting added to the selected array thus not showing

when i add new tags and hit enter, i am not having that new tag automatically selected like the demo. i do not have an :on-change function, as you do not give an example

here is my markup:

<create-link-form inline-template>
                <div>
                    <multiselect
                            :options="taggable.options"
                            :selected.sync="form.tags"
                            :multiple="true"
                            :searchable="true"
                            :taggable="true"
                            :on-tag="addTag"
                            placeholder="Start typing..."
                            label="name"
                            key="id"
                    ></multiselect>
                    <form @submit.prevent="save">
                        <div class="modal-body">
                            <div class="form-group">
                                <label for="url">Url:</label>
                                <input type="text" class="form-control" v-model="form.url"/>
                            </div>
                            <div class="form-group">

                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save changes</button>
                        </div>
                    </form>
                </div>
            </create-link-form>`

here is my component (the save method can be ignored):

import { Multiselect } from 'vue-multiselect';

Vue.component('create-link-form', {
    components: { Multiselect },
    data() {
        return {
            form: {
                url: '',
                tags: [],
            },
            taggable: {
                options: [{id:1, name:'one'}, {id:2, name:'two'}, {id:3, name:'three'}]
            }
        }
    },
    methods: {
        save() {
            this.$http.post('/api/links', this.form).then(response =>{
                this.form.url = '';
                $('#create-link-modal').modal('hide');
                this.$root.getItems();
            }, response =>{
                console.log('uh oh');
            });
        },
        addTag (newTag) {
            const tag = {
                name: newTag,
                id: Math.floor((Math.random() * 10000000))
            }
            this.form.tags.push(tag)
            this.taggable.options.push(tag)
        },
    }
});

i dont get an error, but in vue dev tools, the parent components form.tags array is updated however the components value array is not updated, and this seems to be where the issue is. what is the correct way to update this?

Documentation: single selects shared value

Is there any reason in particular why the two single select dropdowns share the same values, and respond when you change values in the other one?
Once you select value in Single select dropdown, you select the same option from Single select with search. And when you remove the option from Single select with search, it's also being removed from Single select dropdown, even though its own control does not allow that.

Display bug with "press enter to select" and long label

Here's what it does...

On-change doesn't work on last item

When using the on-change attribute, the method doesn't get fired if you remove the last item in the selection.

Webpack build error using default vue-cli project build tools

vue-cli project

Running the dev server works fine but when i run build:

cross-env NODE_ENV=production webpack --progress --hide-modules

i get this error:

ERROR in build.js from UglifyJs
Unexpected token punc «(», expected punc «:» [./~/vue-multiselect/src/mixins/multiselectMixin.js:19,0]

Focus after selecting element

After you select elements using keyboard you end up with the focus being transferred to the first element on the options list. The solution is okay if you used search option, or when you enable removing elements from the list after selection. But the same happens when you navigate through the list using arrows only (i.e. empty search field). 😉

Also, the other issue is when you have mouse pointer on either of the elements on the list... and then you navigate using arrows on keyboard and hit enter. Your selection ends up on the position you initially hovered. 😕

Docs

I could really use some help with the documentation and examples. ;)

I’ve just split the documentation into smaller partials to make it easier to work with.
https://github.com/monterail/vue-multiselect/blob/master/docs/index.jade

If any of you have any cool ideas how we could improve the documentation, let me know! PRs are obviously welcome too! :)

multiselect not visible, always giving fragment instance problem

the warning is as follow:
Attributes ":selected.sync", ":options" are ignored on component because the component is a fragment instance:

i followed same as described in the document. ... please help me out

Override Styles - Remove Scope

While scoped styles are nice in that they don't interfere with other components, they are hard to override. Since you already use BEM in your CSS, it would be trivial to remove the scoped style option and change the block selector to 'vue-multiselect'. That should prevent any interference.

This would make it much easier to override only a few CSS settings, in my case all I need to change is the colors and remove the borders/border-radius. Much less maintenance than duplicating the entire template and stylesheet with each update.

Less strict Vue.js dependency

As of now this module requires version 1.0.21 of vue which is very specific and version 1.0.24 is now out.

Can you update this to a less strict version constraint? E.g. allow for hotfix versions?

[V1.0] @search-change event shouldn't be emited after select an option.

version: 1.0.0-beta.1

Wrong height / font-size

Hi shentao!

I tried to use this awesome plugin and came across next issue:

I realized that when I include bootstrap.less it breaks multiselect's height (for comparsion I included another select on the screenshot). But I couldn't find out why. I see multiselect uses rem units, maybe this is the key.

Haven't you got such problem? Really want to use the plugin but got no idea how to fix that issue and what might cause this

Thanks in advance

Roadmap question - will there be ordering/sorting support for multiselect?

This is a great component, thank you!

I'm curious if you have in mind adding support for reordering items with mouse drag and drop?

I'm making an email contact box, which needs tagging, remote loading, custom delimiters, and reordering support. No project that I've found seems to support all of this completely bug free. I'd be willing to contribute to this project to help get there. But since everyone has their own needs, it seems that most multiselect components suffer from massive bloat after time. Having a clear roadmap may help with that. If you'd rather not support one or more of these features just let me know.

Allow label attribute to be a computed value

The label attribute can only evaluate to prop from passed in object, but it would be super cool if it could take a computed value from multiple props.

Using with normal from inputs

If I wanted to sync up the multiselect with a normal input field, lets say an input:hidden, it all works well if I use primitive values for the multiselect. If I use an array of objects on the other hand, like

[ { value: 1, label: 104 },
   {value: 2, label: 105}]

it writes the whole selected object to the synced up property, but that cant be sent over as a normal form submit data if I`m not mistaking. If I use something like v-model="synced.value" on the aforementioned hidden input, It will get only the value, but then If I try to pass it back to multiselect (after a page refresh for example) it wont work as multiselect needs the whole object it passed as current in the first place, correct?

Should I do some toString parsing or there is a better way.

Can't set placeholder to prop

I'm trying to do something like this:

<multiselect
    :selected.sync="selected"
    :show-labels="false"
    :options="languages"
    placeholder="languagePlaceholder"
></multiselect>

Where languagePlaceholder is a component prop. I tried placeholder="languagePlaceholder" and placeholder="{{ languagePlaceholder }}", both just output a string, not the value of the prop.

Add to vuecomponents.com

Just do it man ;)

Single select vs "press enter to remove"

Press enter to remove is present there, but does not work 😄 It's a part of documentation page.

Provide dist to use without toolchain

Vue itself is provided as a single JS file, which I can simply include in the HTML header and I'm good to go.

I'd love for vue-multiset to provide the same (just a single JS and CSS file). You could then use Vue.use to register the plugin.

Reversed arrow position issue

hide-selected not working after setting options in computed property

Hi
I am getting data through ajax request, and then setting options property , hide-selected not working as expected .

even it doesn't show text as "'Press enter to remove" for respective option after selecting the option

and this causes same option selected multiple times .

am using options as array of objects , and using key , label props

<multiselect 
:options.sync="obj.options" 
:selected.sync="obj.selected" 
:multiple.sync="obj.isMulti" 
:searchable="isSearchable" 
:allow-empty="allowEmpty" 
:hide-selected="obj.hideSelected" 
:touched.sync="isTouched" 
:max-height="400" 
:placeholder.sync="obj.placeholder" 
:allow-empty="allowEmpty"  
:label.sync="obj.label" 
:key.sync="obj.id">
</multiselect>

and obj is :

obj : {
                    options: [{"id":1,"name":"Multi Day Tour","slug":"multi-day-tour","type":"TOUR","subtype":"TYPE"},{"id":2,"name":"Full Day Tour","slug":"full-day-tour","type":"TOUR","subtype":"TYPE"},{"id":3,"name":"Half Day Tour","slug":"half-day-tour","type":"TOUR","subtype":"TYPE"}],
                    selected:[],
                    placeholder:"please select a tour type",
                    isMulti: false,
                    hideSelected: false,
                    errorMsg: "Please select at least one tour type",
                    label: 'name',
                    key : 'id'
                },

any workaround please?

Compile error with browserify

Hi,

Not sure if this is an issue just effecting me or a more general issue.

I am getting a browserfiy issue after adding this to my project:

Attributes are ignored because the component is a fragment instance

Hi there, in my vuex / vue-router spa on a fresh install with just the basic example i'm getting:

vue.common.js?e881:1014 [Vue warn]: Attributes ":selected.sync", ":options" are ignored on component <multiselect> because the component is a fragment instance: http://vuejs.org/guide/components.html#Fragment-Instance

Would really like to use it in my project any insight on this?

Minimal browser requirements in docs?

As I found out, the library has issues in older browsers.

• IE 11: no tab navigation support, click on empty space won't open select, demo page unusable.
• Mozilla 39: no tab navigation support.
• Chrome 44: no tab navigation support.

This information might be very crucial for someone who decides to use the library in production.

Images for the select options?

Is there currently a way to get images in the select options? Ive been trying to get it working, but I havent found a way yet. If images arent supported, is there a way to set a class or id on each option so that I could try to find a css solution?

Not a deal breaker, but it would be nice if the package supported this :)

Weird IE Edge issue with onChange prop

So today I discovered that ONLY on the Microsoft Edge, the multiselect's onChange prop gets called before The parent model's this.data has been set.

What should happen

this.searchParams Should be set as it is set via the data() call on the parent Vue

data () {
   return {
     searchParams: JSON.parse(JSON.stringify(window.vueData.searchParams))
  }
}

<multiselect :selected.sync="searchParams.tire_width"
                                             :options="options.dropdowns.tire_width.data"                              
                                             :on-change="setMultiselectValue"
                                ></multiselect>

setMultiselectValue is used with the onChange prop. Here is what I get when I console each value.

setMultiselectValue (newVal){
                console.log(this.searchParams); // My whole Search Params object. It has the right structure, but everything has an empty value.... This is not possible as i have not set it anywhere empty.
                console.log(vueData.searchParams); // This is the JSON that gets returned from my backend, and its all full with the data that it should be.
                console.log(newVal); // This is the EXACT value I am expecting, because it is the same as the one in vueData.searchParams. 

How on earth, can Multiselect return its new Value, which is passed by the Selected prop, WHICH is returned from the parent this.searchParams, but at the same time this.searchParams is empty...

I have no idea if I managed to explain this at all, I will happily do some sort of skype call or what ever, because this occurs ONLY on the Edge ... Every other browser I could try works flawlessly ... And it should...

I cant do a fiddle as this is tightly coupled with my project..

How do you pass data down from parent?

I use vue-multiselect in complex form. It operates in the manner of autocomplete select.

When it comes to getting the selected item from vue-multiselect — i use $emit in child plus @event in parent and everything works fine.
But when i try to modify the multiselect state from parents — it doesn't work. I tried using selected props, did this.options.push() to no avail.

So is it even possible and if so what's the recommended approach?

Thanks for your attention.