一、代码实现
<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>
二、效果图
