使用 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-autocompleteplaceholder="请输入匹配内容"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 的自动完成搜索功能。用户可以在输入框中输入内容，系统会自动向后端发送请求，并展示匹配的选项供用户选择。这种交互方式不仅提高了用户体验，还通过优化搜索流程，增强了应用程序的功能性和易用性。