使用a-select组件实现多数据源远程搜索下拉框

前段时间写了一个用ele的组件有默认展示的数据，也能下拉触底加载新数据，然后搜索也能实现搜索远程数据，如有需要请看使用组件加自定义指令实现下拉加载select和远程搜索select_Mr.mjw的博客-CSDN博客

然后这个相对于那个实现起来简单一点

下面就是具体代码

 是在vue2中使用的先看data中的数据组件的

 <a-select show-search :value="personName" placeholder="input search text"
                                    style="width: 200px" :default-active-first-option="false" :show-arrow="false"
                                    :filter-option="false" :not-found-content="null" @search="handleSearch"
                                    @change="handleChange">
                                    <a-select-option v-for="d in data" :key="d.value">
                                        {{ d.text }}
                                    </a-select-option>
                                </a-select>

    data() {
        return {
          
            personName: '',
            data: [],

        }
    },

下面是组件中用到的方法，为了提高性能代码中用到了防抖

fetch(value, callback) {
            let timeout;
            let currentValue;
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            currentValue = value;
            function fake() {
                getAction(`这变换成你的远程数据的接口`).then(res => {
                    // console.log(res, '11111111111');
//然后把请求到的数据放到data中
                        if (currentValue === value) {
                            const result = res.result;
                            const data = [];
                            result.forEach(r => {
                                data.push({
                                    value: r.id,
                                    text: r.name,
                                });
                            });
                            callback(data);
                        }
                    })
            }
            timeout = setTimeout(fake, 300);
        },
        handleSearch(value) {
            this.fetch(value, data => (this.data = data));
        },
        handleChange(value) {
            console.log(value);
            this.personName = value;
            this.fetch(value, data => (this.data = data));
        },

按照以上步骤就可以实现简单的远程搜索，但是这个是默认没数据的