使用element-autocomplete实现搜索建议

最新推荐文章于 2023-03-31 16:17:18 发布

code280

最新推荐文章于 2023-03-31 16:17:18 发布

阅读量371

点赞数

分类专栏： element 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/code280/article/details/126338068

版权

element 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求

数据库有8条数据，本地只能存储两条数据，实现查询建议

代码

<style>
    .my-autocomplete li {
        line-height: normal;
        padding: 7px;
    }

    .my-autocomplete li .name {
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .my-autocomplete li .default {
        color: #ccc;
    }
</style>

<body>
    <div id="app">
        <h1>{{title}}</h1>
        <el-col :span="12">
            <div class="sub-title">输入后匹配输入建议</div>
            <el-autocomplete popper-class="my-autocomplete" class="inline-input" v-model="queryString" value-key="name"
                :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect"
                @keyup.enter.native="handleEnter" autocomplete="on">
                <template slot-scope="{ item }">
                    <div class="default">{{item.default}}</div>
                    <div class="name">{{item.name}}</div>
                </template>
            </el-autocomplete>
        </el-col>
        </el-row>
        <h3>提交的数据为:{{submitData}}</h3>
    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                title: '自动补全',
                submitData: "",
                localData: [],
                queryString: ''
            }
        },
        methods: {
            async querySearch(keyword, cb) {
                let result = this.localData.filter((item) => item.name.toLowerCase().indexOf(keyword
                    .toLowerCase()) !== -1);
                // 如果没找到， 则使用模糊查询再从数据库查询一次
                if (result.length === 0) {
                    result = await http.get("demo?keyword=" + keyword);
                    this.localData.splice(0, result.length, ...result);
                }
                result = result.length === 0 ? [{
                    default: "无匹配数据"
                }] : result;
                cb(result);
            },
            handleSelect(data) {
                console.log(data); // 选中的整个对象，包含键
                console.log(this.queryString); // 只有值
            },
            handleEnter() {
                // 显示提交数据
                this.submitData = this.queryString;
                // 隐藏建议提示
                var e = document.querySelector(".el-autocomplete-suggestion");
                e.style.display = 'none';
            }
        },
        async created() {
            this.localData = await http.get('demo')
        }
    })
</script>