element之input输入搜索联想框

最新推荐文章于 2024-10-04 03:45:37 发布

原创最新推荐文章于 2024-10-04 03:45:37 发布 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何使用 Element UI 的自动完成组件实现搜索功能，包括模板代码与 JS 交互逻辑。通过 axios 发送 GET 请求获取搜索建议，并在选择项时进行回调处理。

1. 模板代码

            <el-autocomplete :minlength="2" v-model="searchName" :fetch-suggestions="querySearchAsync" placeholder="请输入内容"
                @select="handleSelect"></el-autocomplete>

2. js 代码

            querySearchAsync(queryString, cb) {
                if (queryString && queryString.length > 2) {
                    let params = { name: queryString }
                    this.axios.get("/api/search/name", { params }).then(res => {
                        if (res.data.code == 200) {
                            cb(res.data.data);
                        }
                    })
                }
            },
            handleSelect(item) {
                console.log(this.searchName, item);
            },