Component like Select2 or Choices.js

[Kevinsillo]

I didn't know how to do something like that with Vant and I created a component with Floating Panel to achieve it. Possibly there is a better way and someone can share it, reaching a standard would be appreciated. Greetings

<script setup lang="ts">
import EpDelete from "~icons/ep/delete"

const props = defineProps<{
    items: any[]
    selected: any[]
    open: boolean
}>()
const emit = defineEmits(["update:open", "new:item", "add:item", "delete:item"])

const itemInput = ref("")
const floatingPanelHeight = ref(0)
const itemsFiltered = computed(() => {
    return props.items.filter((item: any) => item.name.toLowerCase().includes(itemInput.value.toLowerCase()))
})

const checkOpen = () => {
    if (props.open) {
        floatingPanelHeight.value = 500
    } else {
        floatingPanelHeight.value = 0
    }
}

const closePanel = () => {
    emit("update:open", false)
}

const newItem = (item: any) => {
    if (!item) return
    emit("new:item", item)
    itemInput.value = ""
}

const addItem = (item: any) => {
    if (!item) return
    emit("add:item", item)
}

const deleteItem = (item: any) => {
    if (!item) return
    emit("delete:item", item)
}

watch(
    () => props.open,
    () => {
        checkOpen()
    },
)

onMounted(() => {
    checkOpen()
})
</script>

<template>
    <van-floating-panel :height="floatingPanelHeight" :anchors="[100, floatingPanelHeight * 0.6, 400]">
        <van-field placeholder="Search" v-model="itemInput" type="text">
            <template #button>
                <van-button size="small" type="primary" @click="newItem(itemInput)" :disabled="itemInput.length == 0">
                    New
                </van-button>
            </template>
        </van-field>
        <van-cell
            v-for="tag in itemsFiltered"
            :title="tag.name"
            class="flex items-center"
            :class="{ 'selected-tag': props.selected.includes(tag.name) }"
            @click="addItem(tag)"
            clickable
        >
            <template #right-icon>
                <div @click="deleteItem(tag)">
                    <EpDelete class="size-5" />
                </div>
            </template>
        </van-cell>
    </van-floating-panel>
    <van-overlay :show="props.open" @click="closePanel" />
</template>

<style scoped>
.selected-tag {
    background-color: #4299ea55;
}
</style>