search dropdown

Vue-Multiselect with Search [Vue2, Vue3 and Vuejs]

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

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..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^