vue开发：解决el-autocomplete实现输入框模糊搜索，有匹配的展示select下拉，没有匹配则创建新的数据

实现的需求，
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的属性。否则，待输入建议的数据是无法渲染出来

vue开发：解决el-autocomplete实现输入框模糊搜索，有匹配的展示select下拉，没有匹配则创建新的数据

我的一个道姑朋友

引用和评论

微信小程序:修改对象数组中的某个元素

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

手写一个动态海洋和天空效果的vue hooks

原生JS大揭秘—JS代码执行原理解刨

原生electron起步-从零到一完成构建和打包