一、代码实现
<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>
二、效果图
文章来源地址https://www.toymoban.com/news/detail-813931.html
文章来源:https://www.toymoban.com/news/detail-813931.html
到了这里,关于element的el-autocomplete组件的使用(模糊匹配、自定义模板、远程搜索)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!