使用 Vue.js 和 Element Plus 实现自动完成搜索功能
使用 Vue.js 和 Element Plus 实现自动完成搜索功能
- 一、前言
- 1.环境准备
- 2.组件配置
- 3.后端数据请求
- 4.样式
- 5.总结
一、前言
在前端开发中,实现自动完成(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 的自动完成搜索功能。用户可以在输入框中输入内容,系统会自动向后端发送请求,并展示匹配的选项供用户选择。这种交互方式不仅提高了用户体验,还通过优化搜索流程,增强了应用程序的功能性和易用性。
相关文章:
使用 Vue.js 和 Element Plus 实现自动完成搜索功能
使用 Vue.js 和 Element Plus 实现自动完成搜索功能 一、前言1.环境准备2.组件配置3.后端数据请求4.样式5.总结 一、前言 在前端开发中,实现自动完成(autocomplete)功能可以极大地提升用户体验,特别是在需要用户输入和选择内容的…...

SpringBoot自定义starter
SpringBoot自定义starter 1、SpringBoot之starter机制 1.1、什么是自定义starter SpringBoot中的starter是一种非常重要的机制(自动化配置),能够抛弃以前繁杂的配置,将其统一集成进starter,应用者只需要在maven中引入starter依赖&#…...

深入探索大语言模型
深入探索大语言模型 引言 大语言模型(LLM)是现代人工智能领域中最为重要的突破之一。这些模型在自然语言处理(NLP)任务中展示了惊人的能力,从文本生成到问答系统,无所不包。本文将从多个角度全面介绍大语…...
querylist多线程采集curlMulti时,报错Curl error(60)
前言 在使用querylist多线程采集的时候,报错: Curl error(60)。测试了下用http时没有问题,https时有问题。其原因在于多线程采集库引用的另一个库有问题。需要手动更改。 解决 找到:vendor/ares333/php-curl/src/Curl.php 文件,…...
Python数据分析~~美食排行榜
目录 1.模块的导入和路径的选择 2.访问前面五行数据 3.按照条件进行筛选 4.获取店铺评分里面的最高分 5.打印对应的店铺的名字 1.模块的导入和路径的选择 # 导入pandas模块,简称为pd import pandas as pd # 使用read_csv()函数 # TODO 读取路径"/Users/fe…...
Linux下解压.tar.gz文件
.tar.gz 是一种常用的压缩包格式,尤其在Unix、Linux以及macOS系统中非常普遍。这个格式结合了两种不同的功能: Tar (.tar): “Tar” 是“Tape Archive”的缩写,最初是为了将数据备份到磁带上而设计的。Tar命令可以将多个文件和目录打包成一个…...

【电商选品干货】差异化卖点要这样打造,80%商家却做不到
今天就给大家说说,如何去挖掘产品的差异化卖点?我们要找差异化卖点,就是因为我们的产品转化率不足,通常有下面几点原因: 1、产品差异化卖点不足,商家占比30% 2、流量和产品卖点不匹配,商家占比…...

LabVIEW比例压力控制阀自动测试系统
开发了一套基于LabVIEW编程和PLC控制的比例控制阀自动测试系统。该系统能够实现共轨管稳定的超高压供给,自动完成比例压力控制阀的耐久测试、流量滞环测试及压力-流量测试。该系统操作简便,具有高精度和高可靠性,完全满足企业对自动化测试的需…...

运营商认证API在Java、Python、PHP中的使用教程
随着数字化浪潮的推进,实名认证已深入我们生活的方方面面,从线上购物到电子资金转移,手机号已成为注册账号的主要凭证。然而,这也带来了身份验证的难题和手机号被盗用注册账号的风险。在信息爆炸的时代背景下,确保每个…...
用虚拟机,可以在x86的电脑上虚拟出arm的电脑吗
1.用虚拟机,可以在x86的电脑上虚拟出arm的电脑吗 是的,可以在x86的电脑上使用虚拟机技术虚拟出ARM架构的电脑。以下是通过虚拟机实现x86电脑上虚拟ARM电脑的几个关键步骤: 选择合适的虚拟化软件:通常,你可以使用如QE…...
富格林:可信观念摆脱暗箱陷阱
富格林指出,投资者产生的暗箱亏损多半是由于被不可信观念的迷惑影响,以为真的可以毫不费力就能赚钱,最后发现连交易的本金都打水漂了。事实上,投资市场并不像大家想得那么简单。要想安全实现交易成功,避免暗箱陷阱&…...

WEB前端01-HTML5基础(01)
一.WEB相关概念 软件架构 C/S: Client/Server (客户端/服务器端):在用户本地有一个客户端程序,在远程有一个服务器端程序 优点:用户体验好 缺点:开发、安装,部署,维护麻烦 B/S: Br…...

JUC-常见方法与线程的状态
常见方法 start()与run() 主线程直接调用某个线程t1的run()方法,run方法也会执行,但是并不会启动新的线程,而是有主线程调用的run方法,必须使用start才能启动新线程,但是start只能调用一次。 sleep()与yield() sle…...

如果你酿的酒是黄色,说明肯定是 “糊锅”了。
刚刚酿出的酒一般都是清澈见底的,如果你酿的酒是黄色,说明肯定是 “糊锅”了。这样的酒不仅颜色是黄的,而且还能闻到一股特别浓厚的 焦糊味。 这样的酒,米酒小哥是非常非常熟悉的,因为刚开始学习酿酒的那段时 间&#…...

国漫推荐07
玄幻、奇幻 1.侠岚系列 《侠岚》(第1至6季) 《画江湖之侠岚》(侠岚第7季) 2.《斗破苍穹》 三十年河东,三十年河西,莫欺少年穷! 3.《武动乾坤》(第1至4季) 4.《妖神记》…...
力扣刷题35.搜索查找位置
给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 示例 1: 输入: nums [1,3,5,6], target 5 输出: 2示例 2: 输入:…...
setContentView 流程
setContentView 流程 Activity -> setContentView 开发者设置入口PhoneWindow -> setContentView mWindow 在 attach 时初始化为 PhoneWindow,同时PhoneWindow也是Window唯一的实现类PhoneWindow -> installDecor 这一步的作用是 初始化DecorView, 把Deco…...
基于STM32设计的智能手环(ESP8266+华为云IOT)178
基于STM32设计的智能手环(178) 文章目录 一、前言1.1 项目介绍【1】项目功能介绍【2】项目硬件模块组成【3】ESP8266工作模式配置【4】Android手机APP开发思路【5】项目模块划分1.2 项目功能需求(1)生理参数监测(2)计步功能(3)GPS定位(4)时间显示(5)OLED显示屏展示(…...

EE trade:实物黄金投资的好处和坏处
实物黄金是指以金条、金币、金饰品等形式存在的黄金。实物黄金具有保值、避险、抗通胀等特性,被视为传统的投资避险工具。近年来,随着全球经济形势的不确定性增加,实物黄金的投资价值也受到越来越多的关注。 投资实物黄金的优势 保值性&…...
Flutter RSA公钥转PEM
需添加依赖:pointycastle 参考链接:https://github.com/bcgit/pc-dart/issues/165 import dart:convert; import dart:typed_data;import package:pointycastle/pointycastle.dart; import package:pointycastle/src/platform_check/pl…...

C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销,平衡网络负载,延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成:MAC头部frame bodyFCS,其中MAC是固定格式的,frame body是可变长度。 MAC头部有frame control,duration,address1,address2,addre…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...

《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术,说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号(调制) 把信息从信号中抽取出来&am…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
Linux云原生安全:零信任架构与机密计算
Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...
Spring AI 入门:Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天,Spring AI 作为 Spring 生态系统的新生力量,正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务(如 OpenAI、Anthropic)的无缝对接&…...

【Java_EE】Spring MVC
目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据 编辑RequestBody …...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么?1.1.2 感知机的工作原理 1.2 感知机的简单应用:基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...