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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/43468.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nignx配置

Nginx配置之nginx.conf文件解析及配置 1、nginx.conf文件解析 user www-data; worker_processes auto; pid /run/nginx.pid; include /etc/nginx/modules-enabled/*.conf;events {worker_connections 768;# multi_accept on; }http {### Basic Settings###开启文件的高效传输…

中国股市的价值投资

&#xff08;1&#xff09;大盘之外 上周五传的最热的就是央行到二级市场抛国债&#xff0c;以便让长期国债收益率保住。 按理说&#xff0c;保住房子资产就能保住汇率。 如果保不住房子资产价格&#xff0c;那么只能强单保汇率了。有感央行下场调节国债&#xff1a;存款利率-国…

邦芒攻略:三大技能助推职场成功

即将毕业的大学生们可能都在盘算职业生涯。工作中需要的专业知识当然要掌握&#xff0c;不过想脱颖而出成就长期稳定的事业&#xff0c;还要具备一些重要素质。传统教科书里并没提及&#xff0c;但卓越员工跟好员工经常有三点区别&#xff1a; 1、呈现真实的自己 记住表现出真…

SAP_MMABAP模块_MM60物料清单通过增强新增物料描述

业务背景&#xff1a; 用户需要在系统标准的物料主数据查询报表MM60中&#xff0c;添加物料组描述&#xff0c;一直以来&#xff0c;我都觉得标准的MM60显示的内容字段不够多&#xff0c;不太好用。 以往都是给用户新开发一个物料主数据查询报表来解决的&#xff0c;但是这次刚…

SpringSecurity 三更草堂学习笔记

0.简介 Spring Security是Spring家族中的一个安全管理框架。相比与另外一个安全框架Shiro&#xff0c;它提供了更丰富的功能&#xff0c;社区资源也比Shiro丰富。 一般来说中大型的项目都是使用SpringSecurity来做安全框架。小项目有Shiro的比较多&#xff0c;因为相比与Spring…

GAMMA2stamps(全分辨率)

#滤波处理 mk_adf_2d rslc_tab itab rmli/MLI_ave diff0 7 0.4 64 4#################################### 生成经纬度文件 ############################## 建立经纬度文件 (1)生成pointlist mkgrid plist 5800 2000 1 1 1 1(2)将栅格转为点格式 data2pt cop30.rdc.hgt 2…

【爬虫】Python实现,模拟天眼查登录验证获取token

模拟天眼查登录验证获取token 项目介绍逻辑思路效果演示部分代码展示源代码获取 项目介绍 注&#xff1a;本程序测试时期&#xff1a;2024.7.9&#xff0c;稳定可用 天眼查登录接口升级更新之后&#xff0c;后台接口login接口登录运用了4代极验gt&#xff0c;js逆向部分相当复…

基于单片机的饲料搅拌机控制系统设计

摘要 &#xff1a; 文章主要从软件和硬件两个部分对基于单片机的饲料搅拌机控制系统进行研究设计 。 硬件部分主要由传感器模块 、 信号采集模块、 键盘接入模块 、 LED 显示模块 、 继电器模块以及看门狗模块组成 。 软件部分在 KeilC51 软件基础上重点对控制系统主程序 、…

英语零基础怎么学?40分起步逆袭140,我是这样教的

高中英语零基础考试分数&#xff0c;一般是三四十分。高中英语大部分的题目都是选择题&#xff0c;考三四十分&#xff0c;实际上基本上就是猜答案蒙对的分数。 高中英语并不难&#xff0c;在逻辑思维上&#xff0c;它是高中所有科目中最简单的科目。我个人在进入高中以后&…

AI推介-多模态视觉语言模型VLMs论文速览(arXiv方向):2024.07.01-2024.07.05

文章目录&#xff5e; 1.InternLM-XComposer-2.5: A Versatile Large Vision Language Model Supporting Long-Contextual Input and Output2.BACON: Supercharge Your VLM with Bag-of-Concept Graph to Mitigate Hallucinations3.Improving Zero-shot Generalization of Lear…

案列:Nginx+Tomcat负载均衡、动静分离群集

一、案列&#xff1a;部署Tomcat&#xff08;在192.168.10.102和192.168.10.103&#xff09; 1.关闭防火墙 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2.安装java环境 [rootlocalhost ~]# yum -y install java [rootlocalhost ~]# jav…

在 PostgreSQL 里如何处理数据的跨库关联查询性能优化?

文章目录 一、了解跨库关联查询的挑战&#xff08;一&#xff09;网络延迟&#xff08;二&#xff09;数据量庞大&#xff08;三&#xff09;索引不一致&#xff08;四&#xff09;数据库配置差异 二、优化策略&#xff08;一&#xff09;合理设计数据库架构&#xff08;二&…

计算机网络——网络层(概念及IP地址)

网络层概念 网络层向上层提供的两种服务 在计算机网络领域&#xff0c;网络层应该向运输层提供怎样的服务(“面向连接”还是“无连接”&#xff09;曾引起了长期的争论。 争论焦点的实质就是:在计算机通信中&#xff0c;可靠交付应当由谁来负责?是网络还是端系统&#xff1f…

JS之防抖和节流

防抖 (debounce) 所谓防抖&#xff0c;就是指触发事件后在 n 秒内函数只能执行一次&#xff0c;如果在 n 秒内又触发了事件&#xff0c;则会重新计算函数执行时间。 ps: 重置普攻&#xff0c;百度翻译要输完停止一定时间后才翻译。 没有防抖和节流的缺点&#xff1a; 函数触发…

快递柜也上网?你身边的物联网应用

快递柜相信大家都不陌生&#xff0c;如今在各类家庭小区、写字楼、工业园区&#xff0c;各类快递柜已经融入大家的日常&#xff0c;为大家的生活带来便利。大家已经习惯指尖交互就能一键取件&#xff0c;这么便捷的体验背后其实是有一套系统运作机制在支撑的&#xff0c;今天和…

C++入门基础

前言 本篇博客讲解一下c得入门基础 &#x1f493; 个人主页&#xff1a;普通young man-CSDN博客 ⏩ 文章专栏&#xff1a;C_普通young man的博客-CSDN博客 ⏩ 本人giee:普通小青年 (pu-tong-young-man) - Gitee.com 若有问题 评论区见&#x1f4dd; &#x1f389;欢迎大家点赞&…

c++ primer plus 第15章友,异常和其他:异常,栈解退15.3.6

c primer plus 第15章友&#xff0c;异常和其他&#xff1a;异常,栈解退15.3.6 栈解退15.3.6 文章目录 c primer plus 第15章友&#xff0c;异常和其他&#xff1a;异常,栈解退15.3.6栈解退15.3.6 栈解退15.3.6 假设 ty块没有直接调用引发异常的函数&#xff0c;而是调用了对…

深入解析工信认证分类:价值及重要性

随着科技的发展和全球化的推进&#xff0c;企业对于产品和服务的质量、安全、环保等方面的要求日益提高。在这样的背景下&#xff0c;工信认证作为一种权威的第三方认证服务&#xff0c;受到了众多企业的青睐。 一、工信认证的类型 工信认证涵盖了多个领域&#xff0c;包括但不…

全网JAVA数据结构中贪心算法,分治法,动态规划的超详解万字保姆级教学

1.贪心算法 贪心算法是一种在每一步选择中都采取当前状态下最好或者最优的选择&#xff0c;从而希望导致结果是全局最好或者最优的算策略。贪心算法不保证到最优解&#xff0c;但在某些问题上可以快速找到一个近似解。 例如在找零钱问题中问题中&#xff0c;买了一样东西36.4元…

QGroundControl的总体架构,模块化设计和主要组件的功能。

QGroundControl 总体架构详细描述 QGroundControl (QGC) 作为一个开源地面控制站软件&#xff0c;其设计原则是模块化、高扩展性和高可维护性。 总体架构 QGroundControl 由多个层次构成&#xff0c;每个层次负责不同的功能。这种分层结构确保了系统的高内聚性和低耦合性。 …