uniapp 模糊搜索(小白必看)

实现模糊搜索很简单,按照下面的步骤:

1. 搜索栏

<view class="search-box"><uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入移交信息" clearButton="auto" bgColor="#F8F8F8"cancelButton="none" @input="input" /></view>

2.用input 事件获取搜索的内容, 这里用到了 防抖, 把获取到的值 赋值给 this.search

	// 搜索input(e) {// 清除 timer 对应的延时器clearTimeout(this.timer)// 重新启动一个延时器,并把 timerId 赋值给 this.timerthis.timer = setTimeout(() => {// 如果 500 毫秒内,没有触发新的输入事件,则为搜索关键词赋值this.search = e; // 获取输入的搜索关键字}, 500)},

  记得在data 里面 添加 search : "  "

3. 使用计算属性, 将原来的数组进行筛选,   获取新的数据 , 绑定到页面渲染数据的地方

	computed: {filteredList() {return this.getAssetsList.filter((item) => {// 根据多种类型来搜索return item.deptName.includes(this.search) || item.requestNick.includes(this.search) || item.mdeptName.includes(this.search) || item.createTime.includes(this.search)})}},

includes  包含的内容是根据后端返回的数据 来的 ,可以根据搜索的内容进行修改

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

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

相关文章

开源库源码分析:Okhttp源码分析(一)

开源库源码分析&#xff1a;OkHttp源码分析 导言 接下来就要开始分析一些常用开源库的源码了&#xff0c;作为最常用的网络请求库&#xff0c;OkHttp以其强大的功能深受Android开发者的喜爱&#xff08;比如说我&#xff09;&#xff0c;还有对该库进行二次封装而成的热门库&a…

怎样下载和安装HBuilder软件?【附HBuilder快捷键】

HBuilder是一款深度集成Eelipse的IDE编辑器&#xff0c;但其主要集中在Web前端的开发&#xff0c;不能进行Java等后台开发。HBuilder提供了对JavaScrijpt、jQuery、HTML5、MUI等语法的提示功能&#xff0c;同时包含很多快捷键&#xff0c;让前端开发更加便捷。 访问HBuilder官…

首家!亚信科技AntDB数据库完成中国信通院数据库迁移工具专项测试

近日&#xff0c;在中国信通院“可信数据库”数据库迁移工具专项测试中&#xff0c;湖南亚信安慧科技有限公司&#xff08;简称&#xff1a;亚信安慧科技&#xff09;数据库数据同步平台V2.1产品依据《数据库迁移工具能力要求》、结合亚信科技AntDB分布式关系型数据库产品&…

vue 使用canvas 详细教程

Vue.js 中使用 Canvas Vue.js 是一个流行的 JavaScript 框架&#xff0c;用于构建用户界面。它提供了一种简洁的方式来管理和渲染数据&#xff0c;同时也支持与其他库和工具的集成。要在 Vue.js 中使用 Canvas&#xff0c;您可以按照以下步骤进行操作&#xff1a; 在 Vue.js …

vue3+scss开启写轮眼

vue3scss开启写轮眼 一、相关技术二、使用步骤1.安装依赖2.眼球3 勾玉4 旋转动画5 综合 一、相关技术 采用vue3vitescss的技术内容进行开发 二、使用步骤 1.安装依赖 代码如下&#xff1a; npm install sass2.眼球 首先我们根据需要 将眼睛的基础形状描绘出来&#xff0c…

SkyWalking入门之Agent原理初步分析

一、简介 当前稍微上点体量的互联网公司已经逐渐采用微服务的开发模式&#xff0c;将之前早期的单体架构系统拆分为很多的子系统&#xff0c;子系统封装为微服务&#xff0c;彼此间通过HTTP协议RESET API的方式进行相互调用或者gRPC协议进行数据协作。 早期微服务只有几个的情况…

Springboot 实践(15)spring config 配置与运用—自动刷新

目前&#xff0c;网络上讲解spring config的自动刷新&#xff0c;都是通过git服务站的webhook功能执行“actuator/bus-refresh”服务实现的自动刷新。我们的前文讲解的配置中心&#xff0c;配置中心仓库使用的时本地地址&#xff0c;如下图所示&#xff1a; 那么&#xff0c;配…

vim的使用介绍以及命令大全

懒羊羊感谢大家的关注和三连支持~ 目录 前言 一、vim的使用介绍 二、命令大全 1.命令模式 &#xff08;1&#xff09;复制&#xff08;配合粘贴命令p使用&#xff09; &#xff08;2&#xff09;剪切 &#xff08;3&#xff09;粘贴 &#xff08;4&#xff09;删除 …

GIS前端编程-Leaflet插件扩展

GIS前端编程-Leaflet插件扩展 Leaflet插件扩展基本原理Leaflet插件扩展开发方法1. L.Handler扩展2. L.Control扩展为了高效率地进行软件开发 Leaflet插件扩展基本原理 Leaflet是面向移动设备和Web的开源JavaScript库&#xff0c;具有设计简单、性能良好和可用性强的特点&#…

c#.NET技术做到ChatGPT流式响应并实现打字机效果 实现ChatGPT的Stream传输

.NET技术做到ChatGPT流式响应并实现打字机效果 ChatGPT是当前备受瞩目的人工智能产品之一&#xff0c;它具备与人类进行智能对话的能力&#xff0c;同时能够理解人类的想法和需求。在内容创作、营销、智能客服、教育、投资等领域和场景中&#xff0c;ChatGPT都展现出了巨大的…

【openKylin】OpenKylin1.0 x86_64 VMWare安装手册

&#x1f341; 博主 "开着拖拉机回家"带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——&#x1f390;开着拖拉机回家_大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341; 希望本文能够给您带来一定的帮助&#x1f338;文…

选择器进阶与表单表格

华子目录 选择器并集选择器后代选择器子代选择器伪类选择器伪元素选择器结构选择器属性选择器相邻选择器 表单&#xff08;form&#xff09;label标签 表格&#xff08;table标签&#xff09;合并单元格 选择器 下面是我们之前学习过的选择器 *{}&#xff1a;通配符选择器&am…

分销小程序商城功能_小程序商城适合谁_OctShop

微信推出小程序后&#xff0c;分销小程序商城就受到了非常多企业和商家的关注&#xff0c;通过分销商城小程序企业或商家就可以获得庞大的用户裂变过来的用户&#xff0c;组成一个不断裂变拉新用户的网络&#xff0c;可以大大提高企业或品牌的曝光度&#xff0c;从而提高企业或…

视频图像处理算法opencv模块硬件设计图像颜色识别模块

1、Opencv简介 OpenCV是一个基于Apache2.0许可&#xff08;开源&#xff09;发行的跨平台计算机视觉和机器学习软件库&#xff0c;可以运行在Linux、Windows、Android和Mac OS操作系统上 它轻量级而且高效——由一系列 C 函数和少量 C 类构成&#xff0c;同时提供了Python、Rub…

LeetCode 1282. Group the People Given the Group Size They Belong To【哈希表】1267

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…

《优化接口设计的思路》系列:第二篇—接口用户上下文的设计与实现

系列文章导航 《优化接口设计的思路》系列&#xff1a;第一篇—接口参数的一些弯弯绕绕 《优化接口设计的思路》系列&#xff1a;第二篇—接口用户上下文的设计与实现 前言 大家好&#xff01;我是sum墨&#xff0c;一个一线的底层码农&#xff0c;平时喜欢研究和思考一些技术…

Peppertype.ai:人工智能内容营销平台

【产品介绍】 名称 Peppertype.ai 具体描述 Peppertype.ai是一个AI驱动的文章生成工具&#xff0c;可以帮助你在几秒钟内为各种渠道创建吸引人 的内容。无论你是想要写广告文案、社交媒体标题、博客大纲还是网站内容&#xff0c;Peppertype…

基于SpringBoot蜗牛兼职网的设计与实现【附PPT|万字文档(LW)和搭建文档】

主要功能 前台界面&#xff1a; ①首页、兼职信息推荐、查看更多等 ②职位申请、申请日期、上传简历、点击下载简历、留言反馈等 ③个人中心、上传图片、更新信息等 后台登录&#xff1a; ①用户登录&#xff1a; 个人中心、修改密码、个人信息、职位申请管理 ②企业登录&…

java在mysql中查询内容无法塞入实体类中,报错 all elements are null

目录 一、问题描述二、解决方案 一、问题描述 java项目中整体配置了mysql的驼峰式字段匹配规则。 mybatis.configuration.map-underscore-to-camel-casetrue由于项目需求&#xff0c;需要返回字段为file_id&#xff0c;file_url&#xff0c;并且放入实体类中&#xff0c;实体…

赢麻了!smardaten闷声干大事,竟然用无代码开发了复杂小程序!

本文目录 一、【前言】二、移动端项目实战&#xff1a;女性关爱云服务平台2.1 项目背景2.2 6大场景功能拆解&#xff08;1&#xff09;场景1-首页&#xff08;2&#xff09;场景2-找活动&#xff08;3&#xff09;场景3-找组织&#xff08;4&#xff09;场景4-找服务&#xff0…