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

微信小程序:仅前端实现对象数组的模糊查询

效果

 

核心代码

//对数组进行过滤,返回数组中每一想满足name值包括变量query的

let result = array.filter(item => {

      return item.name.includes(query);

});

完整代码

wxml

<input type="text" placeholder="请输入名称" placeholder-style="color:black" bindconfirm="search" />
<view class="all"><view class="item_all" wx:for="{{info}}" wx:key="index"><view class='position'><view class="content"><view class="vv_1">序号:{{item.id}}</view><view class="vv_1">名称:{{item.name}}</view><view class="vv_1">年龄:{{item.age}}</view></view></view></view>
</view>

wxss

/* 搜索框 */
input {background-color: rgb(212, 212, 212);padding: 2%;margin-bottom: 5%;
}/* 列表 */
.all {margin-bottom: 20%;
}.item_all {/* border: 1px solid black; */margin-bottom: 3%;display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;
}.position {display: flex;flex-direction: column;justify-content: center;width: 95%;border-radius: 10px;background-color: #fff;box-shadow: 2px 2px 2px gainsboro;
}.content {padding: 5%;
}.vv_1 {word-break: break-all;padding: 2px 0;
}

js

Page({data: {//完整数据fixed_info: [{id:1,name:'张三',age:23}, {id:2,name:'李四',age:26}, {id:3,name:'王五',age:24}, {id:4,name:'张晓',age:21}], //展示数据info:[],},//刚进入页面执行的操作onLoad(options) {this.setData({info:this.data.fixed_info})  },//搜索框回车事件search(event) {//始终保持查询的数据是完整的数组数据this.setData({info:this.data.fixed_info})let query = event.detail.value; // 要查询的关键词let array = this.data.info;//设置查询的数组let result = array.filter(item => {return item.name.includes(query);});this.setData({info:result})},
})

相关文章:

微信小程序:仅前端实现对象数组的模糊查询

效果 核心代码 //对数组进行过滤&#xff0c;返回数组中每一想满足name值包括变量query的 let result array.filter(item > { return item.name.includes(query); }); 完整代码 wxml <input type"text" placeholder"请输入名称" placeholder-styl…...

【done】剑指offer63:股票的最大利润

力扣188&#xff0c;https://leetcode.cn/problems/gu-piao-de-zui-da-li-run-lcof/description/&#xff08;注意&#xff1a;本题与主站 121 题相同&#xff1a;https://leetcode-cn.com/problems/best-time-to-buy-and-sell-stock/&#xff09; 动态规划思路&#xff1b; 方…...

桶装水订水小程序app,线上预约订水更便捷

桶装水订水小程序app&#xff0c;线上预约订水更便捷。设置好地址&#xff0c;一键订水&#xff0c;工作人员送水到家。还能配送新鲜果蔬&#xff0c;绿色健康有保证。送水软件手机版&#xff0c;提供各种品牌桶装水&#xff0c;在线发起订水服务&#xff0c;由服务人员送水到家…...

解决进程同步与互斥的Dekker算法与Peterson算法

1. Dekker算法 2. Peterson算法...

confluence无法打开空间目录

confluence无法打开空间目录&#xff0c;打开空间目录后无法显示项目 查看项目的类别信息都在 问题原因 由于索引损坏导致&#xff1b; This issue is caused by acorrupted index. Confluence is trying to fetch information about the spacesfrom the available index, …...

python用pychart库,实现将经纬度信息在地图上显示

python使用pyecharts对给到的经纬度数据进行位置标注&#xff0c;下面是批量更新。给入数据&#xff0c;将地图生成。实验数据在下面附件。 from pyecharts import options as opts from pyecharts.charts import Geo import osfolder_path F:\\GPS file_names os.listdir(f…...

Android Studio的笔记--随机数

android java获取随机数 String String 获取 x 位 由0到9组成的随机字符串。 调用方法 Log.i("lxh", "获取由数字0到9组成的随机字符串&#xff1a;" getStr(12));函数 public String RandomStr(int length) {String characters "0123456789"…...

《诗经》中28首巅峰之作

《诗经》是诗词的先声&#xff0c;是最纯美的诗&#xff0c;也是最接地气的诗。 三千年前&#xff0c;先民们劳作、生活、歌唱、恋爱……有感而歌&#xff0c;于是有了《诗经》。 在《诗经》中&#xff0c;爱情是纯美的&#xff0c;思念是绵长的&#xff0c;相遇是惊喜的&…...

十大适合外贸企业邮箱的Gmail替代品推荐

电子邮件仍然是许多人选择的媒介&#xff0c;因为它是交换信息的最可靠和正式的方法。无论是个人还是小型企业&#xff0c;电子邮件仍然是个人和专业用途的重要通信工具。它提供了一种安全、可靠且正式的方法来交换信息和文档以及共享文件。 对于大多数人来说&#xff0c;Googl…...

在Python中使用sqlite3进行数据持久化操作

目录 引言 一、安装sqlite3模块 二、创建数据库连接 三、创建游标对象 四、执行SQL命令 五、提交更改 六、关闭连接 七、使用参数化查询 八、使用ORM进行数据操作 九、备份和恢复数据库 十、处理大量数据 十一、优化查询性能 十二、处理并发访问 十三、处理数据持…...

file2Udp增量日志转出Udp简介

https://gitee.com/tianjingle/file2udp 很多时候服务产生的日志需要进行汇总&#xff0c;这种统一日志处理的方式有elb&#xff0c;而且很多日志组件也支持日志转出的能力。但是从广义上来说是定制化的&#xff0c;我们需要一个小工具实现tail -f的能力&#xff0c;将增量日志…...

快速创建1个G的文件 -----window平台

window平台下 cmdh中 1G: 1073741824 个字节2G: 21474836483G: 32212254724G: 42949672964.5G: 48318382085G: 5368709120 生成一个G的文件 fsutil file createNew big1g.txt 1073741824...

LeetCode【33】搜索旋转排序数组

题目&#xff1a; 思路&#xff1a; https://www.cnblogs.com/CherryTab/p/12196580.html 代码&#xff1a; class Solution {int [] nums;int target;public int find_rotate_index(int left, int right) {if (nums[left] < nums[right])return 0;while (left < righ…...

若依系统富文本框上传图片报错!

报错如下&#xff1a; 原因&#xff1a;如图&#xff0c;富文本路径中存在 / 字符&#xff0c;导致上传出错。 解决方案&#xff1a;将富文本框内容在前端进行加密&#xff0c;后端再解密。 前端&#xff1a; 安装 crypto-js 插件 npm install crypto-js 创建工具类 :在 sr…...

Azure 机器学习:MLOps - 使用 Azure 机器学习进行模型管理、部署和监视

本文介绍如何在 Azure 机器学习中应用机器学习运营 (MLOps) 做法&#xff0c;以管理模型的生命周期。 应用 MLOps 做法可改善机器学习解决方案的质量和一致性。 关注TechLead&#xff0c;分享AI全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管理经验&#xff…...

CSDN每日一题学习训练——Java版(分数到小数、罗马数字转整数、x 的平方根)

版本说明 当前版本号[20231114]。 版本修改说明20231114初版 目录 文章目录 版本说明目录分数到小数题目解题思路代码思路参考代码 罗马数字转整数题目解题思路代码思路参考代码 x 的平方根题目解题思路代码思路参考代码 分数到小数 题目 给定两个整数&#xff0c;分别表示…...

【2021集创赛】 RISC-V杯三等奖:基于E203 处理器的SM4算法硬件加速

杯赛题目&#xff1a;基于蜂鸟E203 RISC-V处理器内核的SoC设计 参赛要求&#xff1a;研究生组/本科生组 赛题内容&#xff1a; 基于芯来科技的开源蜂鸟E203 Demo SoC进行扩展&#xff0c;在限定的可编程逻辑平台上构建面向专用应用领域&#xff08;譬如人工智能、信息安全、工业…...

SUMO道路封闭车辆绕行仿真实验【TraCI】

本文将介绍如何在 SUMO 交通模拟中动态选择车辆绕行指定道路。 绕道是城市驾驶中的常见现象&#xff0c;造成原因有很多&#xff0c;包括建筑和交通事故等。 无论出于何种原因&#xff0c;并非所有车辆都会选择避开这些道路&#xff1b; 有些人可能会毫不犹豫地直接开车过去&a…...

IDEA 无法搜索或者下载插件

File -> Settings… -> Plugins 可以打开插件市场&#xff0c;搜索想要下载的插件&#xff0c;但是可能由于网络问题而无法成功搜索或者下载插件。此时需要设置代理来解决。点击插件界面里的齿轮图标&#xff08;在Marketplace、Installed的右边&#xff09;&#xff0c;…...

unity 使用Vuforia扫描实体物体交互

文章目录 前言一、Vuforia是什么&#xff1f;二、Unity导入Vuforia1.去Unity - Windows – Asset Store&#xff0c;搜vuforia engine&#xff0c;添加到我的资源2.从 Unity 的菜单 Assets -> Import package -> Custom Package 导入脚本&#xff0c;添加 Vuforia Engine…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...