实现的需求,
1.用户点击姓名select框展示姓名列表,选中select里的值拿到姓名。
2.用户手动输入姓名,select中没有对应的姓名,则需要新建姓名。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue开发:解决el-autocomplete实现输入框模糊搜索,有匹配的展示select下拉,没有匹配则创建新的数据</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="name" label="姓名">
<el-autocomplete class="inline-input" v-model.trim="numberValidateForm.name"
:fetch-suggestions="querySearch" placeholder="请输入姓名" @select="handleSelectFun" @change="handleChangeFun"
clearable style="width: 100%"></el-autocomplete>
</el-form-item>
<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: {},
// 模拟后端数据
allDrugCategoryList: [
{
"id": "1",
"category": "黑暗之女",
},
{
"id": "2",
"category": "正义巨像",
},
{
"id": "3",
"category": "卡牌大师",
},
{
"id": "4",
"category": "诡术妖姬",
},
{
"id": "5",
"category": "猩红收割者",
},
{
"id": "6",
"category": "远古恐惧",
},
{
"id": "7",
"category": "符文法师",
},
{
"id": "8",
"category": "众星之子",
},
],
// select框选中的数据
SelectObj: {},
rules: {
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, "用户选中的值");
},
// 获取用户手动输入的值
handleChangeFun(item) {
if (item) {
this.SelectObj = {};
console.log(item, "用户手动输入的值");
}
},
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>
需要注意的是:
fetch-suggestions方法的数据结构:
文档里面,回调的数据结果是一个数组对象,对象里一定必须要有一个 value的属性 。否则,待输入建议的数据是无法渲染出来
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。