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

License

MIT

Sponsor

With your help I can continue paying the server <3