@bananin/bselect NPM

Custom select

Bananin's Select

Install

In head tag

<script src="https://unpkg.com/@bananin/bselect@latest/js/b-select.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/@bananin/bselect@latest/css/b-select.css" />

Setting

Inside Html body:

<!-- html -->
<div class="mb-3" id="app">
    <b-select
        :items="fullItems"
        ref="bSelect"
        :multiple="true"
        :max="20"
        :buscar="true"
        id="bSel"
        name="bSel"
        @input="cambia()"></b-select>
    <p class="mb-0 mt-2" v-html="selects"></p>
</div>

Javascript code:

//Javascript
const app = Vue.createApp({
    components: {
        "b-select": bSelect
    },
    data() {
        return {
            fullItems:[
                {v:"1",t:"Opción 1"},
                {v:"2",t:"Opción 2",st:"Con Subtitulo"},
                {v:"3",t:"Opción 3",st:"Con Imagen",a:"/img/cara.png"},
                {v:"4",t:"Seleccionada",st:"Subtitulo",a:"/img/cara.png",s:true},
                {v:"5",t:"Disabled",st:"Subtitulo",d:true}
            ]
        };
    },
    methods:{
        cambia(){
            this.selects=JSON.stringify(this.$refs.bSelect.values);
        }
    }
}).mount("#app");

#Options:

items: the options that the component will have has the attributes:
Mandatory:
- v: option value
- t: text to display
Optional:
- st: subtitle
- a: avatar/image
- s: item selected by default (Boolean)
- d: item disabled by default (Boolean)
- f: optional it's used by "filtrame" method (String)
ref: reference you will have to call the component from Vue
multiple: you can select more than one item, by default it is disabled
buscar: little box to search inside the select, by default it is activated (you can also use a numeric variable to indicate the minimum number of items before the little box appears)
max: maximum characters displayed from selected items before grouping into X selected items
id: id to be assigned to the select
name: name that is assigned to the select
input: event that fires when the select component changes

#important

If you change the content of the select manually, for example $('#bSel').val(2); you must execute the reverse method app.$refs.bSelect.inverso(); for the component to update correctly, this is because it is not practical to be listening for manual changes that are applied directly to the select to apply changes to the component. It will probably change in the future.

Example in Custom select con Bananin