I use this plugin https://www.npmjs.com/package/vue-select to select multiple values from a list.
Let's assume the following:
Vue.component("v-select", VueSelect.VueSelect);
new Vue({
el: "#app",
data: {
options: []
},
methods: {
onSearch(search, loading) {
if(search.length) {
loading(true);
this.search(loading, search, this);
}
},
search: _.debounce((loading, search, vm) => {
fetch(
`https://api.github.com/search/repositories?q=${escape(search)}`
).then(res => {
res.json().then(json => (vm.options = json.items));
loading(false);
});
}, 350)
}
});
img {
height: auto;
max-width: 2.5rem;
margin-right: 1rem;
}
.d-center {
display: flex;
align-items: center;
}
.selected img {
width: auto;
max-height: 23px;
margin-right: 0.5rem;
}
.v-select .dropdown li {
border-bottom: 1px solid rgba(112, 128, 144, 0.1);
}
.v-select .dropdown li:last-child {
border-bottom: none;
}
.v-select .dropdown li a {
padding: 10px 20px;
width: 100%;
font-size: 1.25em;
color: #3c3c3c;
}
.v-select .dropdown-menu .active > a {
color: #fff;
}
<link href="https://unpkg.com/vue-select/dist/vue-select.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/lodash@latest/lodash.min.js"></script>
<script src="https://unpkg.com/vue-select@3.11.2/dist/vue-select.js"></script>
<div id="app">
<h1>Vue Select - Ajax</h1>
<v-select label="name" multiple :filterable="false" :options="options" @search="onSearch">
<template slot="no-options">
type to search GitHub repositories..
</template>
<template slot="option" slot-scope="option">
<div class="d-center">
<img :src='option.owner.avatar_url'/>
{{ option.full_name }}
</div>
</template>
<template slot="selected-option" slot-scope="option">
<div class="selected d-center">
<img :src='option.owner.avatar_url'/>
{{ option.full_name }}
</div>
</template>
</v-select>
</div>
If I search for eg: "javascript" and select the first four, I have this
But I want something like this:
or like this
Is that possible? I know that there are other plugins that can do that (eg: vue multiselect) but I need to implement it with this plugin because the other plugins missing some other functionality that I need