前端模糊搜索关键字高亮

效果

original-original

代码

<template><view class="flexStart new-box"><view class="company"><!-- 输入框样式 --><view class="spaceBetween companyName" @click.stop="isCompany = true"><input type="text":style="result.userName.length > 0 ? 'padding-right: 90rpx !important;' : 'padding-right: 0rpx !important;'"@input="companyInput" v-model="result.userName" placeholder="请输入文本内容" placeholder-class="placeholderClass" /><!-- 清除按钮,使用的是icon,直接拷代码会失效 --><view v-if="result.userName != ''" @click.stop="clearCompany" class="close center"><text class="iconfont icon-icon-qingchu"></text></view></view><!-- 列表循环 --><scroll-view v-if="isCompany" scroll-y="true" class="companyPrick"><view v-for="(item,index) in filterMsg" :key="index" @click="prickCompany(item)"class="companyPrick-item"><!-- 每一行的字做拆分,匹配合格的返回 true 高亮 --><span :class="dealStr(str) ? 'hightLight' : ''" v-for="(str,strIndex) in item.name":key="strIndex">{{str}}</span></view></scroll-view><!-- 三角形样式 --><view v-if="isCompany" class="triangle"></view></view></view>
</template><script setup lang="ts">import { ref } from 'vue';import { onLoad } from '@dcloudio/uni-app';const isCompany = ref(false) // 是否显示下拉框const result = ref({ // 提交的数据"userName": "","userId": 0,})const companyList = ref([ // 接口获取数据{"id": 284,"name": "测试智能公司",},{"id": 286,"name": "北京文娱有限公司",},{"id": 289,"name": "广州市天河快递有限公司",},{"id": 290,"name": "广东天河电子科技有限公司",},{"id": 291,"name": "广州市天河汽车维修服务有限公司",},{"id": 293,"name": "智能化工厂",},{"id": 294,"name": "广州天河物联智能科技有限公司",},{"id": 295,"name": "测试工程开发",},{"id": 300,"name": "广东立智科技",},{"id": 302,"name": "广州番禺云服务科技",}])const filterMsg = ref([]) // 实际展现数据// 对输入内容处理判断是否符合条件function companyInput() {// result.value.userName 输入的内容let queryStringArr = result.value.userName.split("");let str = "(.*?)";filterMsg.value = [];let regStr = str + queryStringArr.join(str) + str;let reg = RegExp(regStr, "i"); // 以mh为例生成的正则表达式为/(.*?)m(.*?)h(.*?)/icompanyList.value.map(item => {if (reg.test(item.name)) {filterMsg.value.push(item);}});// 输入为空时显示全部数据if (result.value.userName == '') {filterMsg.value = companyList.value}}// 字体高亮设置function dealStr(str : string) {let status = falsefor (let i = 0; i < result.value.userName.length; i++) {if (result.value.userName[i] == str) {status = true}}return status}// 点击选择单位function prickCompany(item : any) {result.value.userId = item.id as numberresult.value.userName = item.nameisCompany.value = falsecompanyInput()}// 清除输入框function clearCompany() {result.value.userId = 0result.value.userName = ""filterMsg.value = companyList.value}// 获取的数据给实际处理列表赋值,在接口处处理即可onLoad(() => {filterMsg.value = companyList.value})
</script><style lang="scss">.new-box {width: 100vw;height: 100vh;flex-flow: column;}.flexStart {display: flex;justify-content: flex-start;align-items: center;}.spaceBetween {display: flex;justify-content: space-between;align-items: center;}.center {display: flex;justify-content: center;align-items: center;}.company {margin-top: 20vh;border-radius: 20rpx;// padding: 20rpx 32rpx 28rpx 32rpx;flex-flow: column;display: flex;justify-content: space-between;align-items: flex-start;position: relative;box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 82, 217, 0.3);.titleName {padding: 20rpx 32rpx 0 32rpx;font-weight: 600;font-size: 32rpx;}.companyName {width: 686rpx;font-family: PingFang SC, PingFang SC;font-weight: 600;font-size: 36rpx;position: relative;// color: rgba(0, 0, 0, 0.9);input {padding: 20rpx 32rpx 20rpx 32rpx;width: 622rpx;color: #3D3D3D;}.close {right: 0;padding: 20rpx;position: absolute;width: 42rpx;height: 42rpx;}.icon-icon-qingchu {font-size: 36rpx;color: rgba(0, 0, 0, 0.40);}}.companyPrick {box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 82, 217, 0.3);z-index: 99;left: 0rpx;position: absolute;top: 140rpx;width: 622rpx;min-height: 60rpx;max-height: 400rpx;background: #FFFFFF;border-radius: 16rpx;padding: 20rpx 32rpx;.companyPrick-item {padding: 20rpx 0;font-family: PingFang SC, PingFang SC;font-weight: 600;font-size: 32rpx;color: #3D3D3D;}}}.rowTime {display: flex;flex-flow: row;justify-content: space-between;align-items: center;}.hightLight {color: rgba(0, 82, 217, 1);}.triangle {z-index: 100;position: absolute;top: 120rpx;right: 68rpx;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid white;}.placeholderClass{color: rgba(0,0,0,0.26) !important;}
</style>

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

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

相关文章

如果已经登录,输入白名单路由想访问白名单页面被重定向其他页面

如果用户已经登录&#xff0c;但尝试访问白名单页面时被重定向到了其他页面&#xff0c;这可能是由于路由守卫的逻辑设置不正确。以下是一些可能的原因和解决方案&#xff1a; 可能的原因&#xff1a; 路由守卫逻辑错误&#xff1a;路由守卫可能错误地将已登录用户重定向到登…

C盘满了怎么清理?一招让你远离C盘空间不足的烦恼

C盘满了怎么清理&#xff1f;一招让你远离C盘空间不足的烦恼&#xff0c;当C盘空间满了时&#xff0c;会给我们来一系列烦恼和潜在问题。比如&#xff1a;系统运行缓慢、程序崩溃或无法安装、启动时间变长、系统不稳定、文件管理困难、游戏卡顿、电脑卡顿、系统故障等问题&…

使用css实现打开抽屉效果(css过渡动画)

方法一&#xff0c;使用高度方式&#xff0c;高度从0到展示进行过渡 HTML代码&#xff1a; <div class"container"><div class"menu">菜单</div><div class"box"></div></div>CSS代码&#xff1a; .box {wi…

Linux使用Docker部署mysql5.7

一、拉取镜像 docker pull mysql:5.7 二、查看镜像 docker images 三、创建容器 这里稍微解释下 -p参数是端口映射 -v参数是数据卷挂载 数据卷挂载是Docker中的一种功能&#xff0c;它允许将主机上的目录或文件系统与容器内的目录绑定&#xff0c;实现数据的持久化存储…

代码随想录算法训练营第45天(py)| 动态规划 | 198.打家劫舍、213.打家劫舍II、337.打家劫舍III

198.打家劫舍 力扣链接 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金。 如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统会自动报警。 给定一个代表每个房屋存放金额的非负整数数组nums&#xff0c;计算你 不触动警报装置的情况下 &…

短剧片源授权,类目丰富优惠多,抢先一步更新你的短剧系统片库!

前言 如今的短剧作为一种新兴的视听艺术形式&#xff0c;正以其独特的魅力迅速占领市场高地。为了满足广大短剧爱好者和从业者的需求&#xff0c;我们提供短剧片源授权服务&#xff0c;凭借剧场独家提供的丰富片源&#xff0c;助力您轻松更新短剧系统片库&#xff0c;抢占市场…

MySQL小版本升级(8.0.36->8.0.37)

关于MySQL升级的话MySQL官方文档上面介绍了2个方法&#xff0c;’就地升级’和‘逻辑升级’。’就地升级‘就是升级底层的RPM包而‘逻辑升级’就是将旧MySQL数据库上的信息迁移到新MySQL数据库上。 本篇文章介绍到的是RPM包升级 升级MySQL版本的典型步骤包括&#xff1a; 备份&…

算法篇-排序

快排 算法思想&#xff1a;每次找一个基数&#xff0c;然后对数组左右遍历&#xff0c;将小于基数的数据放到左边&#xff0c;大于基数的数放到右边&#xff0c;然后将基数左边&#xff0c;右边进行迭代再排序。 public static void quickSort(int[] nums, int left, int ri…

shell的函数

1、定义 将命令序列按照格式写在一起。 格式指的是函数的固定格式&#xff0c;有两种格式 2、作用 &#xff08;1&#xff09;方便重复使用 形成一个函数库&#xff0c;集中在一起&#xff0c;随时可以传参调用。 &#xff08;2&#xff09;大的工程分割成若干个小的功能…

SCIE与SCI期刊的区别

在学术出版领域&#xff0c;SCI&#xff08;Science Citation Index&#xff09;和SCIE&#xff08;Science Citation Index Expanded&#xff09;是两个关键的索引数据库&#xff0c;它们对科研人员在选择发表论文的期刊时起着至关重要的作用。虽然这两个术语经常被交替使用&a…

linux创建账号

在Linux中创建用户账号通常使用useradd命令。以下是一个基本的示例&#xff1a; sudo useradd -m 用户名这里-m选项意味着创建用户主目录&#xff0c;如果不存在的话。 如果你还想设置用户密码&#xff0c;可以使用passwd命令&#xff1a; sudo passwd 用户名这将提示你输入…

Python100题(含答案)

温馨提示&#xff1a;篇幅有限&#xff0c;已打包文件夹&#xff0c;获取方式在&#xff1a;文末 温馨提示&#xff1a;篇幅有限&#xff0c;已打包文件夹&#xff0c;获取方式在&#xff1a;文末 篇幅有限&#xff0c;这份完整版的Python100题已经上传&#xff0c;朋友们如果…

from import *

项目结构 假设我们的项目结构如下&#xff1a; my_project/ |-- dataset/ | |-- __init__.py | |-- imbalance_cifar.py | |-- balance_cifar.py |-- main.py代码示例 1. dataset/imbalance_cifar.py # dataset/imbalance_cifar.pyclass IMBALANCECIFAR10:def __init…

easyx之图形库复习--自制写轮眼的图形绘制

引子效果图如下&#xff1a; 什么是easyx&#xff1f; EasyX 是针对 C/C 的图形库&#xff0c;可以帮助使用C/C语言的程序员快速上手图形和游戏编程。比如&#xff0c;可以用 VC EasyX 很快的用几何图形画一个房子&#xff0c;或者一辆移动的小车&#xff0c;可以编写俄罗斯方…

软考 系统架构设计师系列知识点之杂项集萃(42)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之杂项集萃&#xff08;41&#xff09; 第67题 Windows操作系统在图形界面处理方面采用的核心架构风格是&#xff08; &#xff09;风格。Java语言宣传的“一次编写&#xff0c;到处运行”的特性&#xff0c;从架构风格…

AI PPT生成器,一键在线智能生成PPT工具

PPT作为商业沟通和教育培训中的重要工具&#xff0c;PPT制作对于我们来说并不陌生。但是传统的PPT制作不仅耗时&#xff0c;而且想要做出精美的PPT&#xff0c;需要具备一定的设计技能。下面小编就来和大家分享几款AI PPT工具&#xff0c;只要输入主题&#xff0c;内容就可以在…

学生分组

题目描述 有 n 组学生&#xff0c;给出初始时每组中的学生个数&#xff0c;再给出每组学生人数的上界 R 和下界 L (L≤R)&#xff0c;每次你可以在某组中选出一个学生把他安排到另外一组中&#xff0c;问最少要多少次才可以使 N 组学生的人数都在 [L,R] 中。 输入格式 第一行…

1台SW工作站5人同时使用能实现吗

在当今的数字化时代&#xff0c;高效的工作方式和技术创新是企业竞争力的重要组成部分。SolidWorks作为一款功能强大的三维设计软件&#xff0c;广泛应用于机械、电子、建筑等多个领域。然而&#xff0c;随着企业规模的扩大和团队人数的增加&#xff0c;如何充分利用有限的资源…

关于undo的问题

以下都查看下 undo保留时间&#xff1a; show parameter undo; 查UNDO段状态及自动调整的保留时间命令&#xff1a; select BEGIN_TIME,END_TIME,MAXQUERYLEN,MAXQUERYSQLID,TUNED_UNDORETENTIONfrom V$UNDOSTAT Order By begin_time Desc; 查UNDO段EXPIRED等使用情况&#…

大模型网信办备案全网最详细流程【附附件】

本文要点&#xff1a;大模型备案最详细说明&#xff0c;大模型备案条件有哪些&#xff0c;《算法安全自评估报告》模板&#xff0c;大模型算法备案&#xff0c;大模型上线备案&#xff0c;生成式人工智能(大语言模型)安全评估要点&#xff0c;网信办大模型备案。 大模型备案安…