This component gives you a multi/single select with the power of Vuejs components.

Overview

This component gives you a multi/single select with the power of Vuejs components.

Demo and doc site

vue-multi-select

https://github.com/IneoO/vue-multi-select

What's new in v4.6.0

Set a props for label when empty data

Dependencies

  • required: Vuejs >= 2.x

Install

  1. Clone the repo or npm install vue-multi-select --save
  2. Include the file in your app import vueMultiSelect from 'vue-multi-select'; import 'vue-multi-select/dist/lib/vue-multi-select.min.css'

Contributing

Issues and PR's are much appreciated. When you create a new PR please make it against the develop branch when adding new features and to the fix branch when fixing small issues instead of master.

Usage and Documentation

Params Type
options Object
filters Array
selectOptions Array
v-model Array
reloadInit Boolean
btnLabel Function
btnClass String
popoverClass String
search Boolean
eventName String
position String
searchPlaceholder String
historyButton Boolean
historyButtonText String
disabled Boolean
disabledUnSelect Boolean
emptyTabText String

(NB. position is a string ex: 'top-left', 'top-right', default is 'bottom-left')

Events params
selectionChanged values selected
open -
close -

(NB. selectionChanged naming can be change with eventName)

1. options (Contains options to set the multi-select)

Params Type Default Description
cssSelected Function (option) => option['selected'] ? { 'font-weight': 'bold',color: '#5755d9',} : '' Css passed to value
groups Boolean false Display or not groups selection
multi Boolean false Set single or multiple selection
labelList String 'list' Name Attributes for list
labelName String 'name' Name Attributes for value to display
labelValue String labelName Name Attributes for value to comparaison between them
labelSelected String 'selected' Name attributes for value selected
labelDisabled String 'disabled' Name attributes for value disabled
groupName String 'name' Name Attributes for groups to display

*if you use html balise and don't want to have them find in the search use labelHtml, search will just check the property labelName but v-html the labelHtml.

2. filters to apply to select many options

// Exemple with Select/Deselect all
const filters = [];
filters.push({
  nameAll: 'Select all', // label when want to select all elements who answer yes to the function
  nameNotAll: 'Deselect all', //label when want to deselect all elements who answer yes to the function
  func(elem) {
    return true;
  },
});

// Second exemple to select all elements who contain 2
filters.push({
  nameAll: 'Select all elements with 2',
  nameNotAll: 'Deselect all elements with 2',
  func(elem) {
    return elem.name.indexOf('2') !== -1;
  }
});

3. elements to select/deselect

// when groups not set or false
data = [
  {name: 'choice 1'}, // Name can be changed with labelName in options
  {name: 'choice 2'},
  {name: 'choice 3'},
  {name: 'choice 4'},
  {name: 'choice 5'},
]

// or just an array
// it's also possible when to have an array of strings
// in list when groups is set to true.
data = [
  'choice 1',
  'choice 2',
  'choice 3',
  'choice 4',
  'choice 5',
]

// when groups set to true

data = [{
  name: 'choice 1', // Can be changed with tabName in options
  list: [
    {name: 'choice 1'}, // Name can be changed with labelName in options
    {name: 'choice 2'},
    {name: 'choice 3'},
    {name: 'choice 4'},
    {name: 'choice 5'},
  ]
}, {
  name: 'choice 10', // Can be changed with tabName in options
  list: [
    {name: 'choice 11'}, // Name can be changed with labelName in options
    {name: 'choice 12'},
    {name: 'choice 13'},
    {name: 'choice 14'},
    {name: 'choice 15'},
  ]
}]

4. values selected

[ {name: 'choice 1'}, {name: 'choice 11'}] // In the case we selected choice 1 and choice 11

5. Manual open/close

you can access to openMultiSelect()/closeMultiSelect() by ref to manualy open/close the mutliSelect

<template>
  <mult-select ref="multiSelect" />
</template>

<script>
export default {
  mounted() {
    this.refs.multiSelect.openMultiSelect();
  },
};
</script>

6. Examples

<template>
  <div>
    <multi-select
      v-model="values"
      :options="options"
      :filters="filters"
      :btnLabel="btnLabel"
      search
      historyButton
      :searchPlaceholder="Search"
      :selectOptions="data" />
  </div>
</template>

<script>
import vueMultiSelect from 'vue-multi-select';
import 'vue-multi-select/dist/lib/vue-multi-select.css';

export default {
  data() {
    return {
      search: 'Search things',
      btnLabel: values => `A simple vue multi select (${values.length})`,
      name: 'first group',
      values: [],
      data: [{
        name: 'first group',
        list: [
          { name: '0' },
          { name: '2' },
          { name: '3' },
          { name: '8' },
          { name: '9' },
          { name: '11' },
          { name: '13' },
          { name: '14' },
          { name: '15' },
          { name: '18' },
        ],
      }, {
        name: 'second group',
        list: [
          { name: '21' },
          { name: '22' },
          { name: '24' },
          { name: '27' },
          { name: '28' },
          { name: '29' },
          { name: '31' },
          { name: '33' },
          { name: '35' },
          { name: '39' },
        ],
      }],
      filters: [{
        nameAll: 'select <= 10',
        nameNotAll: 'Deselect <= 10',
        func(elem) {
          return elem.name <= 10;
        },
      }, {
        nameAll: 'Select contains 2',
        nameNotAll: 'Deselect contains 2',
        func(elem) {
          return elem.name.indexOf('2') !== -1;
        },
      }],
      options: {
        multi: true,
        groups: true,
      },
    };
  },
  methods: {
  },
  components: {
    vueMultiSelect,
  },
};
</script>

It's possible to use slot-scope to custom option

<template>
  <div>
    <vue-multi-select
      v-model="values"
      search
      historyButton
      :options="options"
      :filters="filters"
      :btnLabel="btnLabel"
      @open="open"
      @close="close"
      :selectOptions="data">
      <template v-slot:option="{option}">
        <input type="checkbox" :checked="option.selected"/>
        <span>{{option.name}}</span>
      </template>
    </vue-multi-select>
  </div>
</template>

Build Setup

- `npm run dev`: Shortcut to run dev

- `npm run doc`: Shortcut to run dev-doc

- `npm run build:doc`: Shortcut to build doc.

- `npm run build:lib`: Production ready build of your library as an ES6 module (via UMD), ready to import into another project via npm.

Testing Supported By
BrowserStack

thanks

Patrice Clément

Pierre Guilbert

Comments
  • How to programmically deselet base on index

    How to programmically deselet base on index

    Hi, please I am displaying my selected values in a tag format that should be deletable targeting the index and use splice. But for some reason, I can't just splice the index I want out, once I call the splice method on the index I want it starts checking all items in the options and keeps adding to the selected

    opened by olasunkanmi04 11
  • Multi select Button label without number

    Multi select Button label without number

    Hey, I am trying to set the vue-multi-select button label to just display the name without the calculated select item amount, it can't seem to do that.

    <vue-multi-select v-model="venueValues" :options="options" :filters="venueFilters" :btn-label="venueBtnLabel" :select-options="venueData" /> and venueBtnLabel: "venues"

    With this code I still see the calculated item value in the label.

    opened by th-ink 8
  • Can not click again item in Firefox

    Can not click again item in Firefox

    Hi! Thks for issue in ipad before. Now, my tester has a bug in Firefox for me. When I click again an item in list options in Firefox has an error appear: "event is not defined" image Hope you fix it soon! I am looking forward to hearing from you!

    bug 
    opened by TranChiNam 7
  • Displaying the selected item in the button

    Displaying the selected item in the button

    Can I display the selected item in the button? In the parameters, you can specify label, but it would be more convenient to display the selected element

    question feature 
    opened by dormadekhin 7
  • Css not imported correctly

    Css not imported correctly

    I'm not able to load component correctly, I'm using MaterializeCss, and vue2, any idea where this is coming from?

    capture d ecran 2018-06-20 a 14 56 21

    I've set the component like this import multiSelect from 'vue-multi-select'; import 'vue-multi-select/dist/lib/vue-multi-select.min.css'; Vue.component('multi-select', multiSelect)

    Thanks for your help!

    question 
    opened by jjf21 6
  • Problem with set default data in select

    Problem with set default data in select

    Hello,

    I have been using your library and I have a problem with one thing. I tried to populate the select with data from ajax service and It works good but when I try to set default the checked options with the data in model "filters.types" it doesn't work.

    There is my implementation for the plugin in my HTML <VueMultiSelect v-model="filters.types" :btnLabel="btnLabel" :search="false" :historyButton="false" :selectOptions="data" :options="options" class="mb-3" > </VueMultiSelect>

    There is the data property example of my component

    data: [ { title: "", elements: [], }, ], options: { multi: true, groups: true, labelList: "elements", groupName: "title", },

    activityService .types() .then((response) => { this.data[0].elements = response.data.types; }) .catch(() => {});

    The activity service returns the follow array :

    ["4x4","rapel"]

    help wanted 
    opened by quevlu 5
  • When v-model is update, all selectedOptions are pushed into v-model value.

    When v-model is update, all selectedOptions are pushed into v-model value.

    I made new component using your library, thanks. But I found a problem.

    After the first multi selection (at least two), when v-model’s value is update or change, all values are pushed into Options(Param)

    ex)

    <MultiSelect
        v-model="values"
        :btnLabel="btnLabel"
        :options="options"
        :selectedOptions="selectOptions"
    >
    <template v-for="(item, index) in values">
       {{ item.content }} <button @click="values.splice(index, 1)">
    </button>
    </template>
    
    </MultiSelect>
    
    values : [
    {
        content: 'a',
        id: '21'
    }, 
    {
        content: 'b',
        id: '31'
    },
    {
        content: 'c',
        id: '11'
    },
    {
        content: 'd',
        id: '17'
    },
    ]
    

    Every time I press the delete button, all values ​​in selectOptions are pushed. This seems to be a bug. please check.

    question 
    opened by ranbly 5
  • How can I apply customized template?

    How can I apply customized template?

    I wanna customize format of selected field and list field. Can I use some options to apply template customized format with data value? For example that I think(below),

    selected field...

    selectedFieldTemplate: function(dataItem){
        return dataItem.value + '(count: ' + dataItem.count + ')';
    }
    

    list item field... In case of multi-select, I want to add checkbox in each item field.

    listItemTemplate: function(dataItem){
        return '<input type="checkbox"/>' + dataItem.lable + '~' + dataItem.value;
    }
    
    feature 
    opened by Jung-Younghun 5
  • how to use it in codepen.io?

    how to use it in codepen.io?

    How to use it in codepen?

    hello, I want to make some demos with vue-multi-select,but I dont know how to relize it. I can not find a url or cdn. Do you any idea ?

    question feature 
    opened by jackchoumine 4
  • How to cancel previously selected options

    How to cancel previously selected options

    Hello, is there an easy way to cancel selected options? Here's what I did but is not working. All the values are getting updated as expected but don't see the checkboxes/ui getting updated. What am I missing?

    1. At the end of initValues() function, copy valueSelected to a new variable previousSelected. this.previousSelected = this.valueSelected.slice(0);
    2. Add cancel function cancel(){ this.valueSelected = this.previousSelected; this.filter(); this.$emit('input', this.valueSelected.slice(0)); this.$emit(this.eventName, this.valueSelected.slice(0)); },

    Pasting the js file below. Changes highlighted in bold.

    Thanks!

    feature 
    opened by cheekudi 4
  • selectionChanged function implemented after component creat

    selectionChanged function implemented after component creat

    <multi-select class='select-insurance' @selectionChanged="updateValues" :options="options" :selectOptions="insuranceList" /> I have a trouble with function selectionChanged,I want to set some default choosed Items to this list ; I do that , before creat , I use updateValues(valueArray) to set some default choosed Items, but not as I wish, I got none; in debugger I found the function updateValues will implement after created why? and how can i realize my wish

    feature 
    opened by guoqingpingls 4
  • How to custom select css

    How to custom select css

    I want to make .select wide:100%,but is seems not working to me

    <template>
      <vue-multi-select
        v-model="values"
        :filters="filters"
        :options="options"
        :selectOptions="data"
        :btnLabel="btnLabel"
        @selectionChanged="getMultiValues"
        btnClass="roleSelect"
      />
    </template>
    
    <style lang="scss">
      .roleSelect{
        width: 100%;
      }
    </style>
    
    opened by ooolin321 2
  • Change in :selectOptions causes the @selectionChanged event to  trigger continuously.

    Change in :selectOptions causes the @selectionChanged event to trigger continuously.

    Hi, I am stuck in this situation currently. image

    I am using receivedData to populate the dropdown. This receivedData is used in two API calls:

    • First when page is loaded, the dropdown will be populated.
    • Second, in the event handler @selectionChanged when some items are selected, it will make another API request and receive the new values in receivedData variable i.e. the same variable to populate the dropdown again.

    Somehow, this is causing the event to trigger continuously making API requests.

    When I commented the this.receivedData = res.data; line from FilterBySelectedItem(), then the continuous triggering stopped, means receivedData is not changed this time hence not causing the event to trigger.

    Screenshot of event handler code:

    image

    Screenshot of on page load method image

    bug 
    opened by hemansah 1
  • this.$set is not a function

    this.$set is not a function

    I was trying to implement this in my Vue app and I was facing this error.

    Vue Version: 3

    code

    `< vue-multi-select v-model="values1" search :options="options1" :selectOptions="data1" />

    `
    opened by umang-gramener 4
  • can we make select all filter as option

    can we make select all filter as option

    i want to use select all filter as checkbox not a button is this possible. Please advice Screenshot 2021-11-17 at 3 47 23 PM

    if i click on All button its selecting all options. i need same function for option displaying as all with checkbox

    feature 
    opened by Abdul-encora 0
  • Is there any option to deselect all no matter of search result?

    Is there any option to deselect all no matter of search result?

    Hi Guys,

    I think this feature not available which I am asking for. Actually I want multi select with search and selectall/deselectall options. Here I have 100 items all by default selected and by search I have result of 5 items, when I click on deselect all option it only deselecting 5 items rest of all remains selected when I removed search filter. So, my need is deselect all options even if is not displaying in search result.

    Thanks

    feature 
    opened by webturtles18 1
Owner
Valère
Front-End Developper
Valère
Stylable searchable select component for VueJS. This component is renderless so you are free to customize it how you need to!

Please note that this package is still under active development. We encourage everyone to try it and give feedback. ss-select Searchable stylable sele

Miras Mustimov 26 Sep 19, 2022
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 Nov 26, 2022
Simple multi-select component with items displayed in a table like UI

Vue GridMultiselect Simple multi-select component with items displayed in a table like UI Table of Contents ?? Installation ?? Introduction ?? Basic U

Milos Protic 39 Jul 10, 2022
Lightweight and mighty select component like Chosen and Select 2 done the Vue way.

@desislavsd/vue-select Lightweight and mighty select component like Chosen and Select 2 done the Vue way. Demos & Docs License MIT License Copyright (

null 25 Sep 12, 2022
Vue 3 multiselect component with single select, multiselect and tagging options.

Vue 3 Multiselect Sponsors Other libraries @vueform/slider - Vue 3 slider component with multihandles, tooltips merging and formatting. @vueform/toggl

Vueform 541 Nov 21, 2022
stf vue select - most flexible and customized select

stf vue select VUE2 stf vue select - most flexible and customized select For detailed explanation on how things work, checkout the DEMO install # inst

Stfalcon LLC 62 Dec 22, 2021
single select dropdown with autocomplete

vue-single-select simple autocomplete select dropdown component for Vue apps for you! Demo Check it out on CodeSandbox What It Does vue-single-select

Rob Rogers 42 Sep 30, 2022
Everything you wish the HTML select 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.4k Nov 30, 2022
Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.

Selecto.js Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch. Demo / API / Main Project ⚙️ Instal

Daybrush (Younkue Choi) 1.2k Nov 21, 2022
A VueJS plugin that provides a searchable and reactive select list component with no dependencies.

vue-dynamic-select A VueJS plugin that provides a searchable and reactive select list component with no dependencies. View Online Demos Here Installat

Silas Montgomery 17 Sep 18, 2022
An vue select components,vselect是基于vue编写的select组件

vselect An vue select components Demo Live Demo Installation: npm install --save-dev vselect-component How to use 1、To include this project you need t

web_harry 5 Jan 17, 2021
Select components using Bulma as CSS framework.

Vue Bulma Select Select components using Bulma as CSS framework Docs/Examples Could be found here TODO Push to NPM Unit testing Multi-select (tags) De

Gabriel Corado 13 Oct 19, 2022
Multiple select areas in one image (Plugin Vuejs)

Multi Select Areas Image Live Demos https://demo-multi-select-areas-image.herokuapp.com Installation With npm or yarn yarn add multi-select-areas-imag

Sun* Research 39 Nov 23, 2022
Dynamic select box for vuejs - allows configuration of remote / local object fields to be collected

VueFieldSelect vue-field-select Side note - similar / related projects vue-autocompletion vue-field-select (this) Installation via NPM First Install v

Vahid Hedayati 0 Dec 12, 2019
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Nov 25, 2022
Custom select component using Vue.JS

advanced-select What's this Component to render a "select" with advanced interactions (search, select/deselect all, etc) for websites built with Vue a

ENA 15 Nov 24, 2022
A Vue.js search select component

vue-search-select A Vue.js search select component with NO dependencies. CSS borrowed from https://github.com/Semantic-Org Version 2.x Support Vue.js

JungJoo Seo 347 Aug 31, 2022
A component for Vue.js to select double-sided data.

Vue Select Sides A component for Vue.js to select double-sided data. The customer can select one or more items and ship them from side to side. Values

Júlio Rosseti 71 Nov 11, 2022
Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Chosen, Select2, etc. However it was built using Vue.js only ;)

?? _Fireselect_ Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Ch

Firework 51 Jul 23, 2020