search_select.vue

<template>
    <a-select
        show-search
        class="tw-w-full"
        placeholder="input search text"
        :default-active-first-option="false"
        :show-arrow="false"
        :filter-option="false"
        @search="handleSearch"
        allowClear
        :options="options"
        :mode="mode"
        v-on="$listeners"
    />
</template>

<script>
import { getReq } from '@/utils/requestUtil';
import { formatObj } from '@/utils';

export default {
    props: {
        url: String,
        searchField: String,
        mode: String,
        labelFiled: String,
        valueFiled: String,
    },
    model: {
        prop: 'value',
        event: 'change',
    },
    data() {
        return {
            options: [],
        };
    },
    mounted() {
        this.getData('');
    },
    methods: {
        async getData(searchString) {
            this.options = formatObj(await getReq(this.url, { [this.searchField]: searchString }), {
                label: this.labelFiled,
                value: this.valueFiled,
                key: this.valueFiled,
            });
        },
        handleSearch(value) {
            if (this.timeOut) clearTimeout(this.timeOut);
            this.timeOut = setTimeout(() => {
                if (value) this.getData(value);
            }, 300);
        },
    },
};
</script>