el-autocomplete点击异步搜索按钮后不出现下拉框的问题探讨

22 阅读1分钟

如下图点击按钮后出现下拉框,下拉框的数据为调用接口

image.png

<el-autocomplete
        v-model="name"
        :fetch-suggestions="querySearch"
        placeholder="请输入"
        @select="change">

    <template #suffix>

        <el-icon v-if="remoteLoading" class="pointer is-loading"><Loading /></el-icon>
        <el-icon v-else class="pointer" @click="search(name)">
             <Search />
        </el-icon>
    </template>
</el-autocomplete>

let globalCb // 主要思路就是把cb回调函数自己存一份 需要用的时候自己调用即可
const querySearch = (queryString: string, cb: any) => {
    if(!globalCb) globalCb = cb
    const results = queryString
            ? entList.value.filter(createFilter(queryString))
            : entList.value
    cb(results)

}
const createFilter = (queryString: string) => {
    return (restaurant: any) => {
        return (
                restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}
const search = (name: string) => {
    entList.value = [
        { value: 'vue', link: 'https://github.com/vuejs/vue' },
        { value: 'element', link: 'https://github.com/ElemeFE/element' },
        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
        { value: 'babel', link: 'https://github.com/babel/babel' },
    ]
    globalCb(entList.value)
}
const change = (val: any) => {
    console.log(val)
}