el-autocomplete根据输入的值匹配后端数据

糯米黑子

已于 2023-03-09 15:21:27 修改

阅读量180

点赞数

文章标签： vue.js 前端 javascript

于 2022-11-14 17:32:40 首次发布

本文链接：https://blog.csdn.net/qq_52031916/article/details/127851072

版权

这个博客展示了如何在前端使用El-Autocomplete组件进行实时搜索建议。通过v-model绑定用户输入，fetch-suggestions调用querySearchAsync方法获取接口数据，并在handleSelect事件中处理选中项。代码中涉及的属性包括placeholder、clearable、style和trigger-on-focus等，实现了自定义搜索框的功能。

摘要由CSDN通过智能技术生成

前端

<el-autocomplete

    v-model="userQuery.realName"

    :fetch-suggestions="querySearchAsync"

    placeholder="请输入员工姓名"

    @select="handleSelect"

    clearable

    style="width: 200px;margin-right: 9px"

    :trigger-on-focus="false"

></el-autocomplete>

javascript

data() { // 定义变量和初始值
    return {
        detailData: {}
    }
}

查询接口

  methods: {
    querySearchAsync(queryString, cb) {
        //接口
        employeeAPI.getTzUserName(queryString)
        .then(response => {
          //声明一个数组存后端的数据
          let KnowledgeList = []
          //循环遍历数据
          response.data.forEach(item => {
                                //value是显示的名字      content是值（可写可不写）
            KnowledgeList.push({"value": item.realName, "content": item.userId})
          })
           //返回数据回组件
          cb(KnowledgeList);
        });
    },
     //点击匹配值触发
    handleSelect(item) {
        this.detailData.resultRemark = item.content
    },
}