1.问题：el-autocomplete再次搜索会显示上次搜索记录，会闪现一下上次的搜索记录
2.解决方法：
添加这两行代码：
this.$refs.autocompleteRef.suggestions = [];
this.$refs.autocompleteRef.highlightedIndex = -1;修改后：
3.完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue开发：解决el-autocomplete再次搜索会显示上次搜索记录的问题</title>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
padding: 50px;
}
</style>
</head>
<!-- el-autocomplete使用 -->
<!-- https://blog.csdn.net/MoXinXueWEB/article/details/125446268 -->
<body>
<div id="app">
<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="110px" :rules="rules">
<el-row>
<el-col :span="8">
<el-form-item prop="type" label="英雄类型">
<el-select v-model="numberValidateForm.type" placeholder="请选择英雄类型" clearable
@change="changeOrgInventoryList" style="width: 100%">
<el-option v-for="item in orgInventoryListCategoryList" :key="item.id" :label="item.category"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="name" label="姓名">
<el-autocomplete ref="autocompleteRef" v-model.trim="numberValidateForm.name"
:fetch-suggestions="querySearch" placeholder="请输入姓名" @select="handleSelectFun" @change="handleChangeFun"
clearable style="width: 100%"></el-autocomplete>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item>
<el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
<el-button @click="resetForm('numberValidateForm')">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
// 表单提交的数据
numberValidateForm: {},
orgInventoryListCategoryList: [
{
"id": "0",
"category": "上单",
},
{
"id": "1",
"category": "中单",
},
{
"id": "2",
"category": "辅助",
},
],
shangdan: [
{
"id": "1",
"category": "黑暗之女",
},
{
"id": "2",
"category": "正义巨像",
},
{
"id": "3",
"category": "卡牌大师",
},
],
zhogndan: [
{
"id": "4",
"category": "诡术妖姬",
},
{
"id": "5",
"category": "猩红收割者",
},
{
"id": "6",
"category": "远古恐惧",
},
{
"id": "7",
"category": "符文法师",
},
{
"id": "8",
"category": "众星之子",
},
],
fuzhu: [],
heroList: [
[
{
"id": "1",
"category": "黑暗之女",
},
{
"id": "2",
"category": "正义巨像",
},
{
"id": "3",
"category": "卡牌大师",
},
],
[
{
"id": "4",
"category": "诡术妖姬",
},
{
"id": "5",
"category": "猩红收割者",
},
{
"id": "6",
"category": "远古恐惧",
},
{
"id": "7",
"category": "符文法师",
},
{
"id": "8",
"category": "众星之子",
},
],
[],
],
// 模拟后端数据
allDrugCategoryList: [],
// select框选中的数据
SelectObj: {},
isRule: false,
rules: {
type: [
{ required: true, message: '请选择英雄类型', trigger: "change" },
],
name: [
{ required: true, message: '姓名不能为空', trigger: "change" },
],
}
}
},
created() {
},
methods: {
querySearch(queryString, cb) {
// 重命名后端给的属性名
// fetch-suggestions方法的数据结构
// 文档里面，回调的数据结果是一个数组对象，对象里一定必须要有一个 ** value的属性 **。否则，待输入建议的数据是无法渲染出来
let restaurants = this.allDrugCategoryList.map((item) => {
return {
id: item.id,
value: item.category,
};
});
var results = queryString
? restaurants.filter(this.createFilter(queryString))
: restaurants;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
// 模糊匹配
return (restaurant) => {
return restaurant.value.toLowerCase().match(queryString.toLowerCase());
};
},
// 获取用户选中select的值
handleSelectFun(item) {
this.SelectObj = item;
console.log(this.SelectObj, "用户选中的值");
this.numberValidateForm.name = item.value;
this.numberValidateForm.id = item.id;
},
// 获取用户手动输入的值
handleChangeFun(item) {
if (item) {
this.SelectObj = {};
console.log(item, "用户手动输入的值");
this.numberValidateForm.name = item;
}
},
changeOrgInventoryList(type) {
// el-autocomplete模糊搜索，解决再次搜索会显示上次搜索记录
this.$refs.autocompleteRef.suggestions = [];
this.$refs.autocompleteRef.highlightedIndex = -1;
if (type.toString()) {
this.allDrugCategoryList = this.heroList[type];
this.$set(this.numberValidateForm, "name", '');
} else {
this.$set(this.numberValidateForm, "name", '');
}
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (Object.keys(this.SelectObj).length) {
this.$set(this.numberValidateForm, "id", this.SelectObj.id);
} else {
delete this.numberValidateForm.id;
}
console.log(this.numberValidateForm, '表单结果');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
this.SelectObj = {}
}
}
})
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。