当前位置: 首页 > news >正文

使用 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
  • 后端返回的数据格式应包含一个数组,每个元素至少包含 idmpbm(显示文本)字段。
  • 如果请求成功,将返回的数据转换为适合自动完成组件的格式,并通过 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.总结 一、前言 在前端开发中&#xff0c;实现自动完成&#xff08;autocomplete&#xff09;功能可以极大地提升用户体验&#xff0c;特别是在需要用户输入和选择内容的…...

SpringBoot自定义starter

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

深入探索大语言模型

深入探索大语言模型 引言 大语言模型&#xff08;LLM&#xff09;是现代人工智能领域中最为重要的突破之一。这些模型在自然语言处理&#xff08;NLP&#xff09;任务中展示了惊人的能力&#xff0c;从文本生成到问答系统&#xff0c;无所不包。本文将从多个角度全面介绍大语…...

querylist多线程采集curlMulti时,报错Curl error(60)

前言 在使用querylist多线程采集的时候&#xff0c;报错: Curl error(60)。测试了下用http时没有问题&#xff0c;https时有问题。其原因在于多线程采集库引用的另一个库有问题。需要手动更改。 解决 找到&#xff1a;vendor/ares333/php-curl/src/Curl.php 文件&#xff0c…...

Python数据分析~~美食排行榜

目录 1.模块的导入和路径的选择 2.访问前面五行数据 3.按照条件进行筛选 4.获取店铺评分里面的最高分 5.打印对应的店铺的名字 1.模块的导入和路径的选择 # 导入pandas模块&#xff0c;简称为pd import pandas as pd # 使用read_csv()函数 # TODO 读取路径"/Users/fe…...

Linux下解压.tar.gz文件

.tar.gz 是一种常用的压缩包格式&#xff0c;尤其在Unix、Linux以及macOS系统中非常普遍。这个格式结合了两种不同的功能&#xff1a; Tar (.tar): “Tar” 是“Tape Archive”的缩写&#xff0c;最初是为了将数据备份到磁带上而设计的。Tar命令可以将多个文件和目录打包成一个…...

【电商选品干货】差异化卖点要这样打造,80%商家却做不到

今天就给大家说说&#xff0c;如何去挖掘产品的差异化卖点&#xff1f;我们要找差异化卖点&#xff0c;就是因为我们的产品转化率不足&#xff0c;通常有下面几点原因&#xff1a; 1、产品差异化卖点不足&#xff0c;商家占比30% 2、流量和产品卖点不匹配&#xff0c;商家占比…...

LabVIEW比例压力控制阀自动测试系统

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

运营商认证API在Java、Python、PHP中的使用教程

随着数字化浪潮的推进&#xff0c;实名认证已深入我们生活的方方面面&#xff0c;从线上购物到电子资金转移&#xff0c;手机号已成为注册账号的主要凭证。然而&#xff0c;这也带来了身份验证的难题和手机号被盗用注册账号的风险。在信息爆炸的时代背景下&#xff0c;确保每个…...

用虚拟机,可以在x86的电脑上虚拟出arm的电脑吗

1.用虚拟机&#xff0c;可以在x86的电脑上虚拟出arm的电脑吗 是的&#xff0c;可以在x86的电脑上使用虚拟机技术虚拟出ARM架构的电脑。以下是通过虚拟机实现x86电脑上虚拟ARM电脑的几个关键步骤&#xff1a; 选择合适的虚拟化软件&#xff1a;通常&#xff0c;你可以使用如QE…...

富格林:可信观念摆脱暗箱陷阱

富格林指出&#xff0c;投资者产生的暗箱亏损多半是由于被不可信观念的迷惑影响&#xff0c;以为真的可以毫不费力就能赚钱&#xff0c;最后发现连交易的本金都打水漂了。事实上&#xff0c;投资市场并不像大家想得那么简单。要想安全实现交易成功&#xff0c;避免暗箱陷阱&…...

WEB前端01-HTML5基础(01)

一.WEB相关概念 软件架构 C/S: Client/Server &#xff08;客户端/服务器端&#xff09;&#xff1a;在用户本地有一个客户端程序&#xff0c;在远程有一个服务器端程序 优点&#xff1a;用户体验好 缺点&#xff1a;开发、安装&#xff0c;部署&#xff0c;维护麻烦 B/S: Br…...

JUC-常见方法与线程的状态

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

如果你酿的酒是黄色,说明肯定是 “糊锅”了。

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

国漫推荐07

玄幻、奇幻 1.侠岚系列 《侠岚》&#xff08;第1至6季&#xff09; 《画江湖之侠岚》&#xff08;侠岚第7季&#xff09; 2.《斗破苍穹》 三十年河东&#xff0c;三十年河西&#xff0c;莫欺少年穷&#xff01; 3.《武动乾坤》&#xff08;第1至4季&#xff09; 4.《妖神记》…...

力扣刷题35.搜索查找位置

给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 示例 1: 输入: nums [1,3,5,6], target 5 输出: 2示例 2: 输入:…...

setContentView 流程

setContentView 流程 Activity -> setContentView 开发者设置入口PhoneWindow -> setContentView mWindow 在 attach 时初始化为 PhoneWindow&#xff0c;同时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:实物黄金投资的好处和坏处

实物黄金是指以金条、金币、金饰品等形式存在的黄金。实物黄金具有保值、避险、抗通胀等特性&#xff0c;被视为传统的投资避险工具。近年来&#xff0c;随着全球经济形势的不确定性增加&#xff0c;实物黄金的投资价值也受到越来越多的关注。 投资实物黄金的优势 保值性&…...

Flutter RSA公钥转PEM

需添加依赖&#xff1a;pointycastle​​​​​​​ 参考链接&#xff1a;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.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

【WiFi帧结构】

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

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

【Java_EE】Spring MVC

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

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...