<el-autocomplete
v-model="SName"
:fetch-suggestions="querySearchAsync"
:trigger-on-focus="false"
@select="handleSelectScenic"
></el-autocomplete>
以上是组件标签,这里说明几个关键的参数:
- fetch-suggestions:返回输入建议的方法,仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它
- trigger-on-focus:是否在输入框 focus 时显示建议列表
- @select方法是选中建议列表中的某一项
querySearchAsync(queryString, cd) {
// 发请求获取搜索结果
searchScenic(queryString).then(res => {
// 定义一个空数组用来临时存放处理好的结果
var restaurants = [];
// 循环接口返回值,将接口返回对象的SName属性名改为ui组件要的value
res.data.forEach(item => {
const value = JSON.parse(
JSON.stringify(item).replace(/SName/g, "value")
);
// push到空数组
restaurants.push(value);
});
// 清空定时器
clearTimeout(this.timeout);
// 定一个定时器,有结果之前展示loading
this.timeout = setTimeout(() => {
// 调用组件自定方法展示搜索结果
cd(restaurants);
}, 2000 * Math.random());
});
},
handleSelectScenic(item) {
// item是点击选中的一项
console.log("item==>", item);
}
功能完成。
需要注意的是回显的值必须是一个对象数组,且对象属性名称是 “value”,不然回显失败
queryString, cd 这俩个参数也是组件自己的,cd是一个方法,用来resolve结果;queryString是用户输入的关键字