Installation using NPM command -
npm install vue-multiselect --save
Installation using via CDN :
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
Vue Multiselect Select with Search:-
By default searchable is set to true, when searching, vue-multiselect only compares the option labels with the current search query.
Custom-label accepts a function with the options object as the first param. It should return a string which is then used to display a custom label.
Code Sample:-
<!-- Vue component -->
<template>
<div>
<label class="typo__label">Select with Search</label>
<multiselect v-model="value" :options="options" :custom-label="nameWithLang" placeholder="Select..." label="name" track-by="name"></multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
</template>
<script>
import Vue from 'vue'
import Multiselect from 'vue-multiselect'
// register globally
Vue.component('multiselect', Multiselect)
export default {
components: {
Multiselect
},
data() {
return {
value: { name: 'Anil Singh', language: 'Hindi, English' },
options: [
{ name: 'Anil Singh', language: 'Hindi, English' },
{ name: 'Sunil Singh', language: 'Hindi' },
{ name: 'Aradhya Singh', language: 'Hindi, English' },
{ name: 'Sushil Singh', language: 'Hindi' },
{ name: 'Reena Singh', language: 'Hindi, English' }
]
}
},
methods: {
nameWithLang({ name, language }) {
return `${name} — ${language}`
}
}
}
</script>
<!-- Add Multiselect CSS -->
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
HTML:-
<div>
<label class="typo__label">Select with Search</label>
<multiselect v-model="value" :options="options" :custom-label="nameWithLang" placeholder="Select..." label="name" track-by="name"></multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
Reference for more example looks like - https://vue-multiselect.js.org/#sub-getting-started
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
![Vue-Multiselect with Search [Vue2, Vue3 and Vuejs]](https://2.bp.blogspot.com/-wia3fkQjoF4/XMGqr0FurBI/AAAAAAAAUoI/-PzG8uakzHk4NS_6HW1yzaOR2CmZnFoDwCLcBGAs/s72-c/vue-multiselect-search-vue2-vue3-vuejs.png)