elementui中使用带输入建议的input框(el-autocomplete)【input框带搜索列表】

效果图

源码(没有过滤功能的版本)

<template>
    <el-autocomplete v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容">
    </el-autocomplete>
</template>
<script>
export default{
    data(){
        restaurants: [
            { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" }, 
            { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" }, 
            { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
            { "value": "泷千家(天山西路店)", "address": "天山西路438号" }
        ]
    },
    methods:{
        querySearch(queryString, cb) {
            // 调用 callback 返回建议列表的数据 
            cb(this.restaurants); 
        },
    }
}
</script>

源码(有过滤功能的版本)

<template>
    <el-autocomplete v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容">
    </el-autocomplete>
</template>
<script>
export default{
    data(){
        state1: "",
        restaurants: [
            { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" }, 
            { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" }, 
            { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
            { "value": "泷千家(天山西路店)", "address": "天山西路438号" }
        ]
    },
    methods:{
        //获取列表数据
        querySearch(queryString, cb) {
            // 调用 callback 返回建议列表的数据
            var restaurants = this.restaurants; 
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants; 
            // 调用 callback 返回建议列表的数据
            cb(results); 
        },
        //过滤函数
        createFilter(queryString) { 
            return (restaurant) => { 
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0); 
            }; 
        },
    }
}
</script>