Universal select/multiselect/tagging component for Vue.js

Overview

vue-multiselect Build StatusCodecov branchnpm

Probably the most complete selecting solution for Vue.js 2.0, without jQuery.

Vue-Multiselect Screen

Documentation

Visit: vue-multiselect.js.org

Sponsors

Gold

Vuejs Amsterdam

Vue - The Road To Enterprise

Silver

Storyblok

Bronze

Vue Mastery logo

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
  • > 95% test coverage
  • Fully configurable (see props list below)

Breaking changes:

  • Instead of Vue.partial for custom option templates you can use a custom render function.
  • The :key props has changed to :track-by, due to conflicts with Vue 2.0.
  • Support for v-model
  • @update has changed to @input to also work with v-model
  • :selected has changed to :value for the same reason
  • Browserify users: if you wish to import .vue files, please add vueify transform.

Install & basic usage

npm install vue-multiselect
<template>
  <div>
    <multiselect
      v-model="selected"
      :options="options">
    </multiselect>
  </div>
</template>

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

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

JSFiddle

Example JSFiddle – Use this for issue reproduction.

Examples

in jade-lang/pug-lang

Single select / dropdown

multiselect(
  :value="value",
  :options="source",
  :searchable="false",
  :close-on-select="false",
  :allow-empty="false",
  @input="updateSelected",
  label="name",
  placeholder="Select one",
  track-by="name"
)

Single select with search

multiselect(
  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

multiselect(
  v-model="multiValue",
  :options="source",
  :multiple="true",
  :close-on-select="true",
  placeholder="Pick some",
  label="name",
  track-by="name"
)

Tagging

with @tag event

multiselect(
  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

multiselect(
  v-model="selectedCountries",
  :options="countries",
  :multiple="multiple",
  :searchable="searchable",
  @search-change="asyncFind",
  placeholder="Type to search",
  label="name"
  track-by="code"
)
  span(slot="noResult").
    Oops! No elements found. Consider changing the search query.
methods: {
  asyncFind (query) {
    this.countries = findService(query)
  }
}

Contributing

# serve with hot reload at localhost:8080
npm run dev

# distribution build with minification
npm run bundle

# build the documentation into docs
npm run docs

# run unit tests
npm run test

# run unit tests watch
npm run unit

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Comments
  • ReferenceError: deepClone is not defined

    ReferenceError: deepClone is not defined

    Suddenly started to get this error when using vue-multiselect:

    ReferenceError: deepClone is not defined
        at deepClone (eval at 167 (2.app.js:79), <anonymous>:8:20)
        at VueComponent.data (eval at 165 (2.app.js:65), <anonymous>:57:57)
        at VueComponent.mergedDataFn (eval at <anonymous> (app.js:146), <anonymous>:963:18)
        at VueComponent.mergedDataFn (eval at <anonymous> (app.js:146), <anonymous>:964:19)
        at initData (eval at <anonymous> (app.js:146), <anonymous>:3170:12)
        at initState (eval at <anonymous> (app.js:146), <anonymous>:3123:5)
        at VueComponent.Vue._init (eval at <anonymous> (app.js:146), <anonymous>:3376:5)
        at new VueComponent (eval at <anonymous> (app.js:146), <anonymous>:3498:12)
        at createComponentInstanceForVnode (eval at <anonymous> (app.js:146), <anonymous>:1728:10)
        at init (eval at <anonymous> (app.js:146), <anonymous>:1738:43)
    logError @ vue.js?3de6:439
    

    only in Chrome.

    Did anyone face with it? Any ideas how to fix?

    help wanted 
    opened by nikolaynesov 48
  • Return Value

    Return Value

    How can I have a return 'id' instead of a whole object. When I bind it on a data shipper_id I get the whole '{ id: 1, node_name: 'shipper 1' }' instead of just the id

    shippers: [
        { id: 1, node_name: 'shipper 1' },
        { id: 2, node_name: 'shipper 2' }
    ]
    
    enhancement question 
    opened by raphcadiz 47
  • Add translate support

    Add translate support

    How to change slotNoOptions with minimal touches for the component https://github.com/shentao/vue-multiselect/blob/c4924e2972b50776fcc7d48e507cd5441cddc7de/src/Multiselect.vue#L135

    opened by a21ns1g4ts 23
  • Webpack Syntax Error

    Webpack Syntax Error

    Hi,

    I am facing problem using multiselect beta version with webpack. More information:

    ERROR in ./~/vue-multiselect/lib/vue-multiselect.min.js
    Module build failed: SyntaxError: 'with' in strict mode (1:29119)
        at Parser.pp$4.raise (/Users/ralee/Public/projects/helixtap/node_modules/buble/node_modules/acorn/dist/acorn.js:2221:15)
        at Parser.pp$1.parseWithStatement (/Users/ralee/Public/projects/helixtap/node_modules/buble/node_modules/acorn/dist/acorn.js:932:27)
        at Parser.pp$1.parseStatement (/Users/ralee/Public/projects/helixtap/node_modules/buble/node_modules/acorn/dist/acorn.js:708:32)
        at Parser.pp$1.parseBlock (/Users/ralee/Public/projects/helixtap/node_modules/buble/node_modules/acorn/dist/acorn.js:981:25)
        at Parser.pp$3.parseFunctionBody (/Users/ralee/Public/projects/helixtap/node_modules/buble/node_modules/acorn/dist/acorn.js:2105:24)
        at Parser.pp$1.parseFunction (/Users/ralee/Public/projects/helixtap/node_modules/buble/node_modules/acorn/dist/acorn.js:1065:10)
        at Parser.pp$3.parseExprAtom (/Users/ralee/Public/projects/helixtap/node_modules/buble/node_modules/acorn/dist/acorn.js:1810:19)
        at Parser.parseExprAtom (/Users/ralee/Public/projects/helixtap/node_modules/buble/dist/buble.umd.js:656:26)
        at Parser.pp$3.parseExprSubscripts (/Users/ralee/Public/projects/helixtap/node_modules/buble/node_modules/acorn/dist/acorn.js:1715:21)
        at Parser.pp$3.parseMaybeUnary (/Users/ralee/Public/projects/helixtap/node_modules/buble/node_modules/acorn/dist/acorn.js:1692:19)
     @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/settings/account.vue 129:0-41
     @ ./resources/assets/js/components/settings/account.vue
     @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/setting-base.vue
     @ ./resources/assets/js/components/setting-base.vue
     @ ./resources/assets/js/setting.js
    

    Is there a work around for this? Please advice.

    bug 
    opened by ThomasRalee 23
  • Id from object

    Id from object

    I have options days: [ { id: 1, day: 'Poniedziałek' }, { id: 2, day: 'Wtorek' }, { id: 3, day: 'Środa' }, { id: 4, day: 'Czwartek' }, { id: 5, day: 'Piątek' }, { id: 6, day: 'Sobota' }, { id: 7, day: 'Niedziela' } ] How in model return id of selected item? I need this to laravel request

    duplicate enhancement 
    opened by majweb 22
  • Bring to the front

    Bring to the front

    Bring to the front

    How do I leave the component above all other layers?

    Observe the illustration below. The vue-multiselect should, in this case, stand on top of all other screen elements. In fact, it should always stay on top of the other screen elements. I think this should be a standard match.

    How do you solve this?

    Thanks a lot for the help.

    7hbgrvznht

    question 
    opened by xereda 21
  • Focus on multiselect should not open the dropdown

    Focus on multiselect should not open the dropdown

    Current behaviour:

    When multiselect receives focus, the dropdown shows.

    Issue:

    For people who use keyboard for navigation, they need to keep hitting Tab key to cycle through element. While cycling through the elements, if a multiselect receives focus, it immediately shows the dropdown - but the user isn't there to use it, just a transient focus.

    Proposal:

    The dropdown should open only on user action after focus, just like the native <select> element in browser. At least have a prop to do so.

    wontfix 3.0 
    opened by chinchang 19
  • Custom Template for the Selected Chips in Multiselect

    Custom Template for the Selected Chips in Multiselect

    I am using multi-select to select from 3 groups of items, when a user selects item from group-1 I want to add group name in prefix of the selected item when it displayed in selected items in input bar, similarly for rest groups of the groups.

    question 
    opened by roylkng 19
  • Docs

    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! :)

    help wanted wontfix 
    opened by shentao 19
  • Uncaught TypeError with Vue 2.1.7

    Uncaught TypeError with Vue 2.1.7

    I'm getting this error after upgrading to Vue 2.1.7 (I was on Vue 2.1.6 before):

    Uncaught TypeError: Cannot set property 'isRootInsert' of undefined
        at createElm ([email protected]:4055)
        at createChildren ([email protected]:4164)
        at createElm ([email protected]:4089)
        at VueComponent.patch [as __patch__] ([email protected]:4507)
        at VueComponent.Vue._update ([email protected]:2483)
        at VueComponent.<anonymous> ([email protected]:2457)
        at Watcher.get ([email protected]:1663)
        at new Watcher ([email protected]:1655)
        at VueComponent.Vue._mount ([email protected]:2456)
        at VueComponent.Vue$3.$mount ([email protected]:6078)
    

    I put this JSbin together, in case it helps. And here's a (resolved) Vuejs issue which might be related since the error message is similar.

    Also: Merry christmas! 😁

    2.0 
    opened by silvestreh 18
  • Vue 3 compatibility

    Vue 3 compatibility

    Description

    Adding basic example from the website doesn't work on Vue 3 setup.

    Steps to reproduce

    1. npm install ""
    2. copy paste the example
    3. start the server

    Expected behaviour

    To work?

    Actual behaviour

    selfhook.bind is not a function

    Does this library have vue 3 compatibility? Or maybe I'm missing something? Thank you.

    opened by DanelGorgan 17
  • chore(deps-dev): bump core-js from 3.26.1 to 3.27.1

    chore(deps-dev): bump core-js from 3.26.1 to 3.27.1

    Bumps core-js from 3.26.1 to 3.27.1.

    Changelog

    Sourced from core-js's changelog.

    3.27.1 - 2022.12.30
    • Fixed a Chakra-based MS Edge (18-) bug that unfreeze (O_o) frozen arrays used as WeakMap keys
    • Fixing of the previous bug also fixes some cases of String.dedent in MS Edge
    • Fixed dependencies of some entries
    3.27.0 - 2022.12.26
    • Iterator Helpers proposal:
      • Built-ins:
        • Iterator
          • Iterator.from
          • Iterator.prototype.drop
          • Iterator.prototype.every
          • Iterator.prototype.filter
          • Iterator.prototype.find
          • Iterator.prototype.flatMap
          • Iterator.prototype.forEach
          • Iterator.prototype.map
          • Iterator.prototype.reduce
          • Iterator.prototype.some
          • Iterator.prototype.take
          • Iterator.prototype.toArray
          • Iterator.prototype.toAsync
          • Iterator.prototype[@@toStringTag]
        • AsyncIterator
          • AsyncIterator.from
          • AsyncIterator.prototype.drop
          • AsyncIterator.prototype.every
          • AsyncIterator.prototype.filter
          • AsyncIterator.prototype.find
          • AsyncIterator.prototype.flatMap
          • AsyncIterator.prototype.forEach
          • AsyncIterator.prototype.map
          • AsyncIterator.prototype.reduce
          • AsyncIterator.prototype.some
          • AsyncIterator.prototype.take
          • AsyncIterator.prototype.toArray
          • AsyncIterator.prototype[@@toStringTag]
      • Moved to Stage 3, November 2022 TC39 meeting
      • Added /actual/ entries, unconditional forced replacement disabled for features that survived to Stage 3
      • .from accept strings, .flatMap throws on strings returned from the callback, proposal-iterator-helpers/244, proposal-iterator-helpers/250
      • .from and .flatMap throws on non-object iterators, proposal-iterator-helpers/253
    • Set methods proposal:
      • Built-ins:
        • Set.prototype.intersection
        • Set.prototype.union
        • Set.prototype.difference
        • Set.prototype.symmetricDifference
        • Set.prototype.isSubsetOf
        • Set.prototype.isSupersetOf
        • Set.prototype.isDisjointFrom

    ... (truncated)

    Commits
    • f44604e 3.27.1
    • 98995dc add some missed dependencies to entries
    • 10517de add all iterator helpers to (Async)Iterator.from entries for runtime
    • 0f4a279 some stylistic changes
    • da2e4f8 fix a Chakra-based MS Edge (18-) bug that unfreeze (O_o) frozen arrays used a...
    • 66c427f 3.27.0
    • c8322b0 allow gc disposed resources before disposing all resources of stack
    • 0d9478e add some comments
    • 68c9bf6 smoothed behavior of some conflicting proposals
    • 4cc298a fix a couple of tests
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • [Feature request] Multi select of the same item

    [Feature request] Multi select of the same item

    Hi thanks for this work.

    I need to have a multi selection of a same item, like this :

    [
      {
        "name": "Vue.js",
        "language": "JavaScript"
      },
      {
        "name": "Adonis",
        "language": "JavaScript"
      },
      {
        "name": "Adonis",
        "language": "JavaScript"
      },
      {
        "name": "Adonis",
        "language": "JavaScript"
      }
    ]
    

    Is it possible to add this feature ?

    opened by dawadam 0
  • [Question] Add class to multiselect when noResult

    [Question] Add class to multiselect when noResult

    Hey guys! Is it possible to add class to multiselect element when search found no results?

    I want to hide dropdown completely when nothing is found. For this multiselect--no-result class would be super useful.

    opened by bogdan0083 0
  • 'List is empty' is not shown by default (as per the docs)

    'List is empty' is not shown by default (as per the docs)

    I thought the issue was with my code but I tried it on codesandbox and the issue is still there on vue 2 The noOptions slot works just fine, as I can see the value in the DOM but there is a display: none property on the list item that doesn't let it show.

    Reproduction Link

    https://codesandbox.io/s/vue-2-playground-forked-utp9zo

    Steps to reproduce

    1. Select all items

    Expected behaviour

    It should show List is empty Screenshot 2022-12-15 at 12 35 10 PM

    Actual behaviour

    It doesn't show List is empty 😄 Screenshot 2022-12-15 at 12 34 23 PM

    Miscellaneous

    It's the display:none; that's causing the issue Screenshot 2022-12-15 at 12 40 03 PM

    opened by siddhartharora002 1
  • Failed to find '~vue-multiselect/dist/vue-multiselect.min.css'

    Failed to find '~vue-multiselect/dist/vue-multiselect.min.css'

    I'm using nuxt 3.0 and vue-multiselct 3.0-beta-2.

    I tried:

    1:

    <template>
     [...]
    </template>
    <script setup>
    import Multiselect from 'vue-multiselect'
    import '~vue-multiselect/dist/vue-multiselect.min.css'
    [...]
    </script>
    <style>
    @import '~vue-multiselect/dist/vue-multiselect.min.css'; 
    </style>
    

    2:

    <template>
    [...]
    </template>
    <script setup>
    import Multiselect from 'vue-multiselect'
    [...]
    </script>
    <style>
    @import '~vue-multiselect/dist/vue-multiselect.min.css'; 
    </style>
    

    3:

    <template>
    [...]
    </template>
    <script setup>
    import Multiselect from 'vue-multiselect'
    [...]
    </script>
    <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
    

    I always get Failed to find '~vue-multiselect/dist/vue-multiselect.min.css' what am I missing?

    opened by cosbgn 1
Releases(3.0.0-alpha.1)
  • 3.0.0-alpha.1(May 4, 2021)

    New

    • Introduced support for Vue v3.x. Dropping support for Vue v2.x. The component itself becomes largely backward compatible as the implementation itself barely changed.
    Source code(tar.gz)
    Source code(zip)
  • 2.1.6(Apr 27, 2019)

    Changes

    Let npm build the package when installed from source / github master (#970) Add docs section on programmatic control (#947) Add the search prop to the "noResults" scoped slot. (#964) Disable autocomplete in Chrome (#922)

    Fixes:

    Selecting a group may cause selection of duplicate items (#945) (#969) Fix spelling mistake (#954) Uncaught error on backspace. (#939) (#937)

    Source code(tar.gz)
    Source code(zip)
  • 2.1.4(Mar 1, 2019)

    Changes:

    • Use keypress event instead of keydown #847 by @okoriko
    • Display selected zero value (#801) (#851) by @detinho
    • Remove useless console warn (#863) by @karakum
    • Fix mismatched z-index values in prod code. Fixes #850
    • Multiselect is crashing when using groups and $isDisabled #870 by @akki-jat
    • Fix mistake in docs #872 by @ilyario
    • Correct misspelling of "preferred" in component & mixin #904 by @ezracelli
    • Make documentation sidebar readable in smaller resolutions (#885) by @gabrielchiconi
    • remove duplicate css rules for disabled state (#913) by @Nfinished
    • Fix typo in slots documentation (#895) by @btoo
    • Change active input style from width auto to 100% to fix placeholder issue. (#935) by @NewkirkS
    • consider $isDisabled before removing selected (#929) by @tarun1793
    Source code(tar.gz)
    Source code(zip)
  • v2.1.3(Oct 3, 2018)

  • 2.1.2(Oct 2, 2018)

    New

    f5ad5af Added selection slot around multiselect tags 2a4da0c Add getLabel method to tag slot (#744) 3169143 Added type definition file (#747) 496937b Add slot that shows message about empty options (#699) 60e2884 Retain class 'multiselect__option--group' even groupSelect prop is set to false (#799) 8024d61 Fix #815: Tabbing in firefox when there is a horizontal scroll bar (#817)

    Fixes

    6483cfa make index of visibleValues the unique key 16cd900 Update bower.json (#774) 0874091 Fix placeholder markup (#700) b833c68 matches docs with source code. correct slot event name (#722) 65b9895 Fix #690, enter and leave field with tab (#697)

    P.S. Please accept my apology for delaying the release for such a long time. 😞

    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(Mar 18, 2018)

    Important

    • Finally got rid of deep cloning of the value prop into local state, that was later mutated. The internalValue is now completely derived from the value. This means that the Multiselect won’t update if you don’t use v-model or handle the @input event properly. It also solves problems with circular structures as well as dynamic i18n of options etc.
    • Groups (all values from a group) can be now selected by clicking on the label thanks to @kubacode! 🚀
    • Those release notes include everything that happened since the 2.0.3 release.
    • I’m terribly sorry for the time it took me to get back on the project...
    • Thanks everyone for the patience and your help with closing issues / submitting PRs!
    • The next release will probably be the long-awaited rewrite – v3.0.

    Fixes

    • #659 Setting padding to 0 when option is selected to prevent a small text input from appearing below select (#659) (@cpepin)
    • c2fb318 Fix: #489 Manually implement #675 (@shentao)
    • 9223aa6 Fix #606, adjust colors and paddings. (@shentao)
    • #583 Increased font-size of input to sensible minimum. (#583) (@keeganstreet)
    • #625 Adjust pointer position when currently selected option is a label. This can happen when multiselect was opened as empty and group was added at runtime. (#625) (@Frizi)
    • f2a15c8 Solve issue with groupHighlight (@shentao)
    • #588 Fix for new tags changing to lowercase (#588) (@rickbolton)
    • b6993ce Fix styling
    • #534 Fix ios double click selection (#534) (@ptrhoffmann)
    • 42b18cf Fix #473
    • f985a43 Fix #483
    • b238735 Fix #484
    • #515 Set tabindex on input instead of container if searchable. Fixes #411 (#515) (@havgry)

    New

    • 7e07c0e Implement #674 (@shentao)
    • 6715a18 No longer DeepClone value into internalValue (@shentao)
    • #645 Single select custom html label (#645) (@fanckush)
    • 13f7fb6 Improve the singleLabel slot feature (@shentao)
    • eca59ac Implement Group Select by clicking on the group label by (@kubacode) 🎉
    • #528 Add option to change the tag position (#528) (@rickbolton)

    Maintenance & Docs

    • f3f76bd Update ISSUE_TEMPLATE.md (@shentao)
    • 1f6e2f2 Remove props docs from README to make it easier to maintain (@shentao)
    • 65a0cb8 Migrate tests to use Jest 🚀 (@shentao)
    • 8848669 Add Jest through vue-cli (@shentao)
    • #639 Fix example code for multiple select to match newest vue api (#639) (@M-Zuber)
    • #646 Update SelectedLabel to lowercase selectedLabel (#646) (@bm2ilabs)
    • #579 Docs typo fixes: seach vs. search (#579) (@jbruni)
    • #564 Spelling fix (#564) (@Brimstedt)
    • #613 doc: typo (#613) (@Yuliang-Lee)
    • #591 In the Props section of the documentation, the props are now written in camel case, the same as they are in component itself (#591) (@AndrewGardhouse)
    • 09ad71f Rework Docs
    • b3a5649 Fix #345, update docs, add promise polyfil
    Source code(tar.gz)
    Source code(zip)
  • v2.0.3(Sep 27, 2017)

    Fixes

    • 41a8914 Fix #486 #488
    • bf4775f Fix #510, Adjust previously mergd fixes
    • #395 add mousedown event to multiselect-single (#395) (@mmsch)
    • #491 Fix bug about the display of dropdown list when click on scrollbar in IE11 (#491) (@tuanna45)
    • #427 Fix the predicted number of visible options (#427) (@pczarn)
    • #415 [Fix] Option label on non-empty options (#415) (@hiendv)
    • #430 Fix User Experience with tab navigation (#430) (@pczarn)
    • #479 Fix Closure Compiler Errors (#479) (@zeronone)
    • abb7c28 [Fix #454] Hide selected should work with internalSearch = false
    • 63e7d73 Remove empty space at content bottom (@leanniby)
    • ca9b78d Fix active bottom border. (@frandiox)
    • 3a6c6ef Fix group labels
    • 24cd226 Fix showNoResults.
    • 32c558b Fix #230
    • a711ff5 Add innertia to options, rename inputName to name, fix #357
    • b134709 Correct the way to check whether an variable is empty array (@riophae)
    • 41fc501 Fix #303, #71 potential fix for #363
    • 9be8e87 Fix #337
    • dcd8ba0 Fix #374
    • 0a49f90 Fix #382
    • db46a91 Fix #393, #379
    • 3ecdad5 Added fix for defect #313 to prevent clicks on scrollbar from clearing the input
    • cbde1b6 Fix external stylesheet reference (@mega667)
    • #346 Fix search prop being cleared on scrollbar click (@dmungin)

    New

    • #419 Add RTL support (#419) (@PejmanNik)
    • c4591e7 Change and document caret slot (@pczarn)
    • a35d40d Add #176
    • fbb076b Add #401. Add toggle :show-no-results message

    Maintenace & Docs

    • #511 mulitple -> multiple in docs (#511) (@callumacrae)
    • #509 Fix component declaration in Getting Started guide (#509) (@Herteby)
    • #452 Limit prop comments (@guibarscevicius)
    • 3e6b419 Added NPM badge (@304NotModified)
    • 1e6a337 [fix] Typo in the docs (@Zip753)
    • 59c2e81 Update comments on limit prop (@guibarscevicius)
    • 3b6e316 Fix typo in getting started example (@yeonhoyoon)
    • 89ad940 language fixes (@sandbox-services)
    • 80648da test for null (@sandbox-services)
    • #326 Fix style link mistake (@mega667)
    • e6fdd6e Fix typo (@dobromir-hristov)
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-beta.15(Mar 15, 2017)

  • v2.0.0-beta.14(Mar 15, 2017)

    Important

    Styles are now contained inside a separate css file. This should enable usage in SSR apps. It should also make it easier to customize the styles without having redundant CSS rules. However, you have to add the styles manually. Usually this can be done by adding:

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

    inside a root component or in the place where vue-multiselect is used or as a static asset along with your component-agnostic CSS code. When used without a bundler, you can add the file as a static asset with this CDN link:

    <style src="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css"></style>
    

    New

    • #136 Options list appear on top if there is no space below the component
    • Enable SSR support

    Changes

    • #164 Refactor single vs multiple selects by @pczarn
    • #196 Added warning for conflicting configuration
    • #211 noResults slot won’t be displayed if loading is set to true
    • #234 Creating a tag when in single-select mode should close the dropdown by @innominata
    • Migrated to webpack 2

    Fixes:

    • #188 Prevent enter submit the form by @slevy85
    • #197 New tagging entries are not transformed to lowercase
    • #204 Full options list should not flash when the component loses focus
    • #190 Closing the multiselect should not cause any isLabel related errors in any case
    • #195 Pointer should now correctly point to the first non-label option when using option groups
    • #188 Pressing enter key should not submit the form by @slevy85
    • #208 Placeholder should now behave correctly in every case
    • #187 Search query is no longer trimmed
    • #274 Custom search should not interfere with option groups by Eidan Spiegel
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-beta.13(Dec 27, 2016)

  • v2.0.0-beta.11(Dec 15, 2016)

    New:

    Support for option groups #111

    Example grouped options:

    options: [
      {
        label: 'Group A',
        values: [1, 2, 3]
      },
      {
        label: 'Group B',
        values: [4, 5, 6]
      }
    }
    

    And here’s how to configure the dropdown. group-values should point to the property where the option list is located. group-label should point to the group label.

    <multiselect :options="options" group-values="values" group-label="label">
    

    Complete docs soon. :)

    Fixed:

    #150 #144 #147 #128 #109 #102

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-beta.10(Oct 31, 2016)

  • v2.0.0-beta.9(Oct 5, 2016)

    New

    • Added options-limit prop (expecting a number) that limits the visible options to the first x matching results. By default, the options-limit is set to 1000. This should provide a simple way to improve performance by reducing the number of options rendered. (same as in 1.x)
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-beta.8(Oct 4, 2016)

    New:

    • Support for v-model based on Form-Input-Components-using-Custom-Events
    • CustomLabel function can be applied to both primitives and objects
    • LocalSearch prop, to enable local filtering. Disabling it might be useful if you have async search. Default is true.

    Breaking changes:

    • Instead of Vue.partial for custom option templates you can use a custom render function.
    • The :key prop has changed to :track-by, due to conflicts with Vue 2.0.
    • @update has changed to @input to also work with v-model
    • :selected has changed to :value for the same reason

    If your @update handler was only assigning the new value to the model, like for example:

    onChange (newVal) {
      this.selected = newVal
    }
    

    you can safely change it to just v-model="selected".

    Source code(tar.gz)
    Source code(zip)
  • v1.1.4(Oct 4, 2016)

    Fix

    • #117

    New

    • #119 customLabel now works on primitive options

    Technically it’s not a breaking change but...

    If you start seeing [object Object] instead of labels read this: Previously (for objects list) if label prop was not present, the label calculating method was using option.label as a fallback for creating labels. This is no longer true. This behavior was not documented. If your options are objects, make sure you pass the correct label prop as stated in the docs!

    Source code(tar.gz)
    Source code(zip)
  • 1.1.3(Sep 18, 2016)

    New

    • #102 tab key now selects the hovered option and skips to the next focusable element.
    • #94 Added options-limit prop (expecting a number) that limits the visible options to the first x matching results. By default, the options-limit is set to 1000. This should provide a simple way to improve performance by reducing the number of options rendered.

    Fixes

    • #93
    • #101
    • #100
    • #88
    Source code(tar.gz)
    Source code(zip)
  • 1.1.2(Aug 9, 2016)

    New

    • #79 Introduced :local-search prop, that when set to false disables the local filtering based on search query. Useful for async searches, where you want to show all the returned options.

    Fixes

    • Fixed regression coming from 1.1.0 (not showing highlight labels).
    Source code(tar.gz)
    Source code(zip)
  • 1.1.1(Aug 9, 2016)

  • 1.1.0(Aug 8, 2016)

    New:

    #77 Introduce support for custom option’s template.

    Example from the README:

    Using Vue’s partial API

    multiselect(
      :options="styleList",
      :selected="selectedStyle",
      :option-height="130",
      :custom-label="styleLabel",
      @update="updateSelectedStyle",
      option-partial="customOptionPartial"
      placeholder="Fav No Man’s Sky path"
      label="title"
      key="title"
    )
    
    import customOptionPartial from './partials/customOptionPartial.html'
    Vue.partial('customOptionPartial', customOptionPartial)
    
    // ...Inside Vue component
    methods: {
      styleLabel ({ title, desc }) {
        return `${title} – ${desc}`
      },
      updateSelectedStyle (style) {
        this.selectedStyle = style
      }
    }
    
    <div>
      <img class="option__image" :src="option.img" alt="No Man’s Sky" />
      <div class="option__desc">
        <span class="option__title">{{ option.title }}</span>
        <span class="option__small">
          {{ option.desc }}
        </span>
      </div>
    </div>
    
    
    Source code(tar.gz)
    Source code(zip)
  • 1.0.1(Jul 31, 2016)

  • 1.0.0(Jul 27, 2016)

    New

    • Added id prop, which is now passed along all events and can be used to identify which instance emitted the event.
    • API is now events based:
      • @update – called after each change, passes the value and id
      • @select – called after selecting an element, passes the selectedOption and id
      • @remove – called after removing an element, passes the removedOption and id
      • @open – called after opening the dropdown, passes the id
      • @close – called after closing the dropdown, passes the value and id
      • @tag – called after attempting to create a tag, passes the searchQuery and id
      • @search-change – called after the search query changes, passes the searchQuery and id
    • The deepClone function is now available as import import { deepClone } from 'vue-multiselect'
    • Added loading prop, which shows/hides the spinner
    • Added disabled prop, which disables the component if true
    • The selected prop is no longer required

    Breaking Changes

    • Two-way binding is deprecated. Please do NOT use .sync anymore. Vue-Multiselect will never change anything outside of its own scope.
    • To propagate changes (updating selected value) inside parent component, you always need to listen to @update event. An example update function could look like this:
      onUpdate (newVal) { this.selected = newVal }
    
    • Props with callback functions like: onChange, onSearchChange are now deprecated. Use events instead.
    • touched prop is deprecated. Use @open to detect if the component has been touched.

    Fixed

    • #72 If vue-multiselect is inside a fieldset which has the disabled attribute, the component will be also partially disabled (pointer-events: none). IE11+
    • #70
    • #62
    • #60
    • #48

    Additionally added some tweaks to the code

    Source code(tar.gz)
    Source code(zip)
  • 0.3.1(Jul 15, 2016)

  • 0.3.0(Jun 23, 2016)

    Docs:

    • Split docs into partials: https://github.com/monterail/vue-multiselect/blob/master/docs/index.jade

    Improvements

    • Better importing #38

    Fixes:

    • Fixed #37
    • Fixed #41
    Source code(tar.gz)
    Source code(zip)
  • 0.2.6(Jun 18, 2016)

  • 0.2.5(Jun 16, 2016)

    New

    • Tagging
    • Custom labels
    • Now an UMD module

    Fixes

    • Removed scoped attribute from styles
    • Changed rem to px #30 #28

    TODO:

    • Solve problem: v-show and performance drops vs v-if and buggy scroll bar.
    Source code(tar.gz)
    Source code(zip)
  • v0.1.7(May 26, 2016)

    Fixes:

    • Removed sass from Muliselect.vue. Now using pure CSS. This should fix problems with browsersify.
    • Fixed problem with spinner (v-if vs v-show)

    Docs:

    • Added missing props to docs
    • Improved mobile experience a bit. Still no inertia on iOS.
    Source code(tar.gz)
    Source code(zip)
  • v0.1.6(May 26, 2016)

  • v0.1.5(May 25, 2016)

    New:

    • Styles are scoped
    • Added private cloneDeep function (from Vuex)

    Fixes:

    • Fixed bug with passing object reference (breaking Vuex)
    • Fixed test command in readme
    • Removed chromedriver from dependencies
    • Fixed leftovers from conversion to html

    Others:

    • Improved documentation
    Source code(tar.gz)
    Source code(zip)
  • v0.1.4(May 24, 2016)

  • v0.1.2(May 24, 2016)

    NEW

    • Props for several additional configs: label names, keys
    • Changed matching of objects from hackish Stringify to comparing by passed key
    • Introduced few more tests
    • Basic docs and use cases

    FIXES

    • Several minor fixes

    TODO

    • Improve docs
    • Write e2e tests
    • Test on different browsers than Chrome
    • More improvements
    Source code(tar.gz)
    Source code(zip)
Owner
Damian Dulisz
@vuejs core team. Technical Lead at Coursedog. Curator of news.vuejs.org. Coffee lover. Occasional photographer.
Damian Dulisz
Everything you wish the HTML box. It's jQuery based and it has autocomplete and native-feeling keyboard navigation; useful for tagging, contact lists, etc.

selectize.js → Selectize is looking for new members on the maintenance team! Selectize is an extensible jQuery-based custom <select> UI control. It's

null 12.9k Dec 31, 2022
Selectize is the hybrid of a textbox and element could do, wrapped up into a lightweight, extensible Vue component.

vue-select Everything you wish the HTML <select> element could do, wrapped up into a lightweight, zero dependency, extensible Vue component. Vue Selec

Jeff Sagal 4.5k Jan 2, 2023
A multi-select component with nested options support for Vue.js

vue-treeselect A multi-select component with nested options support for Vue.js Features Single & multiple select with nested options support Fuzzy mat

Fangzhou Li 2.6k Jan 5, 2023