element的el-autocomplete组件的使用（模糊匹配、自定义模板、远程搜索）

本文介绍: element的el-autocomplete组件的使用（模糊匹配、自定义模板、远程搜索）

一、代码实现

<template>
    <div>
        <!-- trigger-on-focus 是否在输入框 focus 时显示建议列表 -->
        <!-- autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，
        在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。 -->
        <!-- fetch-suggestions 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它 -->
        <el-row class="demo-autocomplete">
            <el-col :span="24">
                <div class="sub-title">激活即列出输入建议</div>
                <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容"
                    @select="handleSelect"></el-autocomplete>
            </el-col>
            <el-col :span="24">
                <div class="sub-title">输入后匹配输入建议</div>
                <el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="请输入内容"
                    :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>
            </el-col>
            <el-col :span="24">
                <div class="sub-title">自定义模板</div>
                <el-autocomplete class="inline-input" v-model="state3" :fetch-suggestions="querySearch" placeholder="请输入内容"
                    :trigger-on-focus="true" @select="handleSelect">
                    <i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick">
                    </i>
                    <template slot-scope="{ item }">
                        <div class="name">{{ item.value }}</div>
                        <span class="addr" style="color:#b4b4b4;">{{ item.address }}</span>
                    </template>
                </el-autocomplete>
            </el-col>
            <el-col :span="24">
                <div class="sub-title">远程搜索</div>
                <el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容"
                    @select="handleSelect"></el-autocomplete>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    name: 'AutoComplete',
    data() {
        return {
            restaurants: [],
            state1: '',
            state2: '',
            state3: '',
            state4: '',
        };
    },
    mounted() {
        this.restaurants = this.loadAll();
    },
    methods: {
        // 获取数据
        loadAll() {
            return [
                { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
                { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
                { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
                { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
                { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
                { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
            ];
        },
        querySearch(queryString, callback) {
            console.log(queryString, 'queryString')
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            callback(results);
        },
        // 根据queryString进行筛选
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        // 选中
        handleSelect(item) {
            console.log(item);
        },
        // 点击图标
        handleIconClick(ev) {
            console.log(ev, 'ev');
        },
        // ---------------------------------------------远程搜索相关------------------------------------

        querySearchAsync(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

            // 实际项目，从接口获取数据
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                cb(results);
            }, 3000 * Math.random());
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
    },
}
</script>

<style scoped>
.sub-title{
    margin-top: 10px;
    margin-bottom: 10px;
}
</style>