使用 Vue.js 和 Element Plus 实现自动完成搜索功能

---

一、前言

在前端开发中，实现自动完成（autocomplete）功能可以极大地提升用户体验，特别是在需要用户输入和选择内容的场景中。本文将介绍如何使用 Vue.js 结合 Element Plus 组件库，通过向后端发送请求来实现搜索并匹配功能。

1.环境准备

确保你的项目已经集成了 Vue.js 和 Element Plus。如果还没有安装，可以通过以下方式进行安装：

npm install vue@next
npm install element-plus

2.组件配置

首先，我们将创建一个包含自动完成功能的表单组件。

<template>
  <el-form-item label="搜索并匹配：">
    <el-autocomplete
      placeholder="请输入匹配内容"
      v-model="matchName"
      :fetch-suggestions="querySearchAsync"
      @select="handleSelect"
    ></el-autocomplete>
  </el-form-item>
</template>

在上面的代码中：

• el-autocomplete 是 Element Plus 提供的自动完成组件，用于实现输入框下拉匹配功能。
• v-model="matchName" 将输入框的值与 matchName 变量进行双向绑定。
• :fetch-suggestions="querySearchAsync" 指定了一个方法 querySearchAsync，用于根据用户输入获取匹配的选项列表。
• @select="handleSelect" 当用户选择了某个选项时触发 handleSelect 方法。

3.后端数据请求

在 <script setup> 部分，我们使用 Axios 发起异步请求来获取后端数据。

<script setup>
import axios from "axios";
import { ref } from "vue";
import { ElMessage } from "element-plus";

const matchName = ref("");

const querySearchAsync = async (querySearch, cb) => {
  if (!querySearch) {
    cb([]);
    return;
  }

  try {
    const response = await axios.get("/xxxxx/xxxxx/xxxxxxx", {
      params: { current: 1, size: 10, roomName: querySearch },
    });
    const options = response.data.data.map(item => ({
      id: item.id, // 后端返回的唯一标识字段
      value: item.mpbm // 后端返回的显示文本字段
    }));
    cb(options);
  } catch (error) {
    ElMessage.error(error.message);
    cb([]);
  }
};

const handleSelect = (item) => {
  console.log(item, "选择结果");
  console.log("[id：" + item.id + "； mpbm：" + item.value + "]");
};
</script>

在这段代码中：

• querySearchAsync 方法接收用户输入的 querySearch 参数，并通过 Axios 发送 GET 请求到后端接口 /dockingApi/ladderControl/queryRoomName。
• 后端返回的数据格式应包含一个数组，每个元素至少包含 id 和 mpbm（显示文本）字段。
• 如果请求成功，将返回的数据转换为适合自动完成组件的格式，并通过 cb(options) 将匹配的选项列表传递给组件。
• 如果请求失败，将显示错误消息。

4.样式

最后，在 <style scoped> 部分，你可以添加组件的样式。

<style scoped>
/* 可以根据需要添加样式 */
</style>

5.总结

通过以上配置，我们成功地实现了一个基于 Vue.js 和 Element Plus 的自动完成搜索功能。用户可以在输入框中输入内容，系统会自动向后端发送请求，并展示匹配的选项供用户选择。这种交互方式不仅提高了用户体验，还通过优化搜索流程，增强了应用程序的功能性和易用性。

原文地址：https://blog.csdn.net/weixin_46146718/article/details/140273954

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！