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

js根据数据关键字实现模糊查询功能

news 文章来源：https://blog.csdn.net/dyk11111/article/details/129816197 2025/2/6 1:07:21

js根据数据关键字实现模糊查询功能

  • 模糊查询
  • 实现模糊查询功能的步骤和一般方法
  • 第一步：创建假数据或请求接口数据
  • 第二步：分析数据格式，处理数据
  • 第三步：验证功能
  • 完整代码

模糊查询

模糊查询功能是指在搜索或者查询时，允许用户输入部分关键词或者模糊信息，从而快速找到相关的结果。它的意义在于方便用户快速找到相关信息，提高用户体验，同时也能够增强搜索引擎的搜索能力，提高搜索结果的准确性。此外，模糊查询功能还可以应用于数据挖掘、自然语言处理等领域。

实现模糊查询功能的步骤和一般方法

在JavaScript中实现模糊查询的一般步骤和方法包括：

  1. 获取用户输入的关键词或模糊信息；
  2. 遍历存储数据的数组或对象，将每个元素与用户输入的关键词进行匹配；
  3. 如果匹配成功，将该元素添加到结果数组中；
  4. 最后返回结果数组，供用户查看。

具体实现方法包括：

  1. 使用字符串的indexOf()函数来查找是否包含关键词或模糊信息；
  2. 使用正则表达式来进行模糊匹配；
  3. 使用第三方库或插件来实现模糊查询功能，如jQuery、lodash等。

以上是一些常见的实现方法，具体的实现方式还需要根据具体的需求和场景进行选择和调整。

第一步：创建假数据或请求接口数据

在这里，我们先创建一下假数据用以说明

const data = [{name: '张三',location: '北京',age: 25},{name: '李四',location: '上海',age: 30},{name: '王五',location: '广州',age: 28},{name: '赵六',location: '北京',age: 22},{name: '关七',location: '北京',age: 22}];

第二步：分析数据格式，处理数据

使用正则表达式来匹配输入的关键词实现模糊查询功能

				function search(keyword) {const pattern = new RegExp(keyword, 'i'); // 不区分大小写return data.filter(item => {return pattern.test(item.name) || pattern.test(item.location) || pattern.test(item.age.toString());});}

第三步：验证功能

			console.log(search('北京')); console.log(search('2')); console.log(search('王'));

这里我们搜索关键字 “北京”，“2”，“王”，显示如下：
在这里插入图片描述
至此功能实现

完整代码

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>const data = [{name: '张三',location: '北京',age: 25},{name: '李四',location: '上海',age: 30},{name: '王五',location: '广州',age: 28},{name: '赵六',location: '北京',age: 22},{name: '关七',location: '北京',age: 22}];function search(keyword) {const pattern = new RegExp(keyword, 'i'); // 不区分大小写return data.filter(item => {return pattern.test(item.name) || pattern.test(item.location) || pattern.test(item.age.toString());});}console.log(search('北京'));console.log(search('2'));console.log(search('王'));</script></body>
</html>

相关文章：

js根据数据关键字实现模糊查询功能

js根据数据关键字实现模糊查询功能模糊查询实现模糊查询功能的步骤和一般方法第一步&#xff1a;创建假数据或请求接口数据第二步&#xff1a;分析数据格式&#xff0c;处理数据第三步&#xff1a;验证功能完整代码模糊查询 模糊查询功能是指在搜索或者查询时&#xff0c;允许…...

编程日记 2023/3/29 15:04:26

java获取对象属性

Field[] fields vo.getClass().getDeclaredFields(); for (Field field : fields) {//设置允许通过反射访问私有变量field.setAccessible(true);//获取字段的值String value "";Class<?> type field.getType();if (Date.class.equals(type)) {value DateU…...

编程日记 2023/3/29 14:59:25

51单片机（IIC协议OLED屏）

一、IIC协议 1、IIC协议概述 1.1、概述&#xff1a;IIC全称Inter-Integrated Circuit (集成电路总线) 是由PHILIPS公司在80年代开发的两线式串行总线&#xff0c;用于连接微控制器及其外围设备。IIC属于半双 工同步通信方式 1.2、特点&#xff1a;简单性和有效性。 由于接口直…...

编程日记 2023/3/29 14:54:24

你知道，华为对项目经理要求的3项技能5项素质是什么吗？

很多人一定在好奇&#xff0c;华为对项目经理的要求是什么呢&#xff1f;普通项目经理应具备什么素质&#xff0c;才能进入华为这样的大厂&#xff0c;在严峻的经济形势下无惧裁员呢&#xff1f; 一、三项软技能 我们在华为举办的项目经理论坛中找到了答案&#xff1a;对于华…...

编程日记 2023/3/29 14:49:23

优漫动游 提升效率常用的C4D技巧

C4D是近几年非常热的趋势&#xff0c;经常有人问3D相关的问题&#xff0c;想把自己在找捷径的过程中觉得最实用的小技巧分享给大家   1、快速定位层级和模型   模型的过程中&#xff0c;经常遇到模型层级多难定位的问题&#xff0c;逐级打开或者全部展开对于定位模型使…...

编程日记 2023/3/29 14:44:21

基于蚁群算法的时间窗口路径优化

目录 背影 蚁群算法的原理及步骤 基本定义 编程思路 适应度函数 算法的规则 特点 主要参数 代码 结果分析 展望 背影 现代物流配送对时间要求更高，是否及时配送是配送是否成功的重要指标，本文对路径优化加时间窗口，实现基于蚁群算法的时间窗口路径优化， 蚁群算法 基本…...

编程日记 2023/3/29 14:39:20

liunx

linux常用命令 mkdir &#xff1a;创建文件夹 rm -f &#xff1a;删除文件 docker cp 文件名 20f:容器内地址 将文件从linux系统移动到docker地址 ln -s 将两个文件做链接 compgen -u 查看所有用户 groups 查看所在组 vim 编辑 quit 退出 sudo su - root 获得root权限 cp dir1/…...

编程日记 2023/3/29 14:34:19

机动车发票组件【vue】

发票组件 问题反馈&#xff1a;在这就可以 Install-下载 npm install motorvehicles --savewarrning&#xff1a;我们推荐您设置key的&#xff0c;因为不存在它会带来数据的复用性问题usage-使用说明 import MotorVehiclesIvoice from motorvehiclesimport MotorVehiclesIvo…...

编程日记 2023/3/29 14:29:18

学习笔记-剖析k8s之StatefulSet的拓扑状态-3月day18

文章目录前言StatefulSetHeadless ServicePod的拓扑状态小结附前言 Deployment实际上并不足以覆盖所有的应用编排问题&#xff0c;原因在于Deployment对应用做了一个简单化的假设&#xff1a;一个应用的所有Pod&#xff0c;是完全一样的。所以&#xff0c;它们互相之间没有顺序…...

编程日记 2023/3/29 14:24:16

Java实现输出九九乘法口诀表，输入行数输出对应的梯形（平行四边形）这两个代码

目录 一、前言 二、代码部分 1.输出九九乘法口诀表的代码 三、程序运行结果&#xff08;控制台输出&#xff09; 一、前言 1.本代码是我在上学时写的&#xff0c;有一些地方没能完美实现&#xff0c;请包涵也请多赐教&#xff01; 2.本弹窗界面可以根据简单的要求进行输…...

编程日记 2023/3/29 14:19:16

C++空间配置器

目录 1.什么是空间配置器 2.为什么需要空间配置器 3.SGI-STL空间配置器实现原理 3.1一级空间配置器 3.2二级空间配置器 3.2.1内存池 3.2.2 SGI-STL中二级空间配置器设计 3.3 空间配置器的默认选择 4.空间配置器与容器的结合 1.什么是空间配置器 空间配置器&#xff0…...

编程日记 2023/3/29 14:14:14

JConsole使用教程

JConsole是一个Java虚拟机的监控和管理工具&#xff0c;可以监控Java应用程序的内存使用、线程和类信息等。 以下是JConsole的使用教程&#xff1a; 1.启动JConsole JConsole是一个Java自带的工具&#xff0c;可以在bin目录下找到jconsole.exe文件。双击运行该文件即可启动JC…...

编程日记 2023/3/29 14:09:13

JS手写防抖和节流函数（超详细版整理）

1、什么是防抖和节流防抖&#xff08;debounce&#xff09;&#xff1a;每次触发定时器后&#xff0c;取消上一个定时器&#xff0c;然后重新触发定时器。防抖一般用于用户未知行为的优化&#xff0c;比如搜索框输入弹窗提示&#xff0c;因为用户接下来要输入的内容都是未知的&…...

编程日记 2023/3/29 14:04:11

我的Macbook pro使用体验

刚拿到Mac那一刻&#xff0c;第一眼很惊艳&#xff0c;不经眼前一亮&#xff0c;心想&#xff1a;这是一件艺术品&#xff0c;太好看了吧 而后再体验全新的Macos 系统&#xff0c;身为多年的win用户说实话一时间还是难以接受 1.从未见过的访达&#xff0c;不习惯的右键 2. …...

编程日记 2023/3/29 13:59:10

炼石入选“首届工业和信息化领域商用密码应用峰会”典型方案

2023年3月22日-23日&#xff0c;浙江省经济和信息化厅、浙江省通信管理局、浙江省密码管理局、工业和信息化部商用密码应用产业促进联盟联合举办的“首届工业和信息化领域商用密码应用峰会”&#xff08;以下简称峰会&#xff09;在浙江杭州成功举办&#xff0c;旨在深入推进工…...

编程日记 2023/3/29 13:54:08

使用new bing chat成功了

步骤一：在扩展商店搜索并安装modheader 打开浏览器； 点击右上角的三个点图标，选择“更多工具” -> “扩展程序”； 在扩展程序页面上方的搜索框中输入“modheader”，然后点击“搜索商店”； 在搜索结果中找到“ModHeader”扩展程序，点击“添加至”按钮，然后再点击“添…...

编程日记 2023/3/29 13:49:07

Golang每日一练(leetDay0019)

目录 55. 跳跃游戏 Jump Game &#x1f31f;&#x1f31f; 56. 合并区间 Mmerge Intervals &#x1f31f;&#x1f31f; 57. 插入区间 Insert Interval &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练…...

编程日记 2023/3/29 13:44:05

记录一次性能测试遇到的问题

零、压测指标问题 压测指标&#xff0c;一定要需求方定 啊&#xff0c;谁提压测需求&#xff0c;谁来定压测指标。 如果需求方&#xff0c;对压测指标没有概念&#xff0c;研发和测试&#xff0c;可以把历史压测指标、生产数据导出来给需求方看&#xff0c;引导他们来定指标&…...

编程日记 2023/3/29 13:39:04

C++运算符重载基础教程

所谓重载&#xff0c;就是赋予新的含义。函数重载&#xff08;Function Overloading&#xff09;可以让一个函数名有多种功能&#xff0c;在不同情况下进行不同的操作。运算符重载&#xff08;Operator Overloading&#xff09;也是一个道理&#xff0c;同一个运算符可以有不同…...

编程日记 2023/3/29 13:34:03

Git命令总结

全局配置 git config --global user.name ‘你的名字’ git config --global user.email ‘你的邮箱’ 当前仓库配置 git config --local user.name ‘你的名字’ git config --local user.email ‘你的邮箱’ 查看 global 配置 git config --global --list 查看当前仓库…...

编程日记 2023/3/29 13:29:00

【车载以太网】BCM89572A0BCFBG、BCM89559GB0BCFBG、BCM89559GA0BCFBG具有安全启动和安全通信功能

BCM89572A0BCFBG 设备是Broadcom第六代完全集成的L2多层开关解决方案&#xff0c;支持车载网络应用的汽车认证(AEC-Q100)和温度等级。BCM8956X系列产品为汽车行业提高了具有多种一流功能的交换机的标准&#xff0c;例如802.1AE MACsec等集成安全功能&#xff0c;增加了主机连接…...

编程日记 2023/3/29 13:23:59

Lighttpd入门教程

Lighttpd入门教程概述入门教程安装配置静态文件服务动态文件服务虚拟主机SSL启动服务器日志模块总结lighthttpd使用场景和原理使用场景原理概述 Lighttpd&#xff08;也称为轻量级HTTP服务器&#xff09;是一款快速、灵活、轻量级的Web服务器&#xff0c;旨在提供高性能和低资…...

编程日记 2023/3/29 13:18:58

Springboot 多线程分批切割处理 大数据量List集合 ，实用示例

前言 哲学提问镇贴&#xff1a; 不了解异步怎么使用的看官&#xff0c; 可阅&#xff1a; SpringBoot 最简单的使用异步线程案例 Async_小目标青年的博客-CSDN博客 Springboot Async异步扩展使用 结合 CompletableFuture_小目标青年的博客-CSDN博客 想了解更多关于批量list处…...

编程日记 2023/3/29 13:13:56

SQLMAP工具基础使用

本文用的是kali自带的sqlmap工具 我们通过常用命令来理解sqlmap的基本使用 目录 检测注入 获取敏感信息 获取表 获取表的字段 获取数据 --technique 使用指定的注入方式 使用基于时间的延时注入 支持多种注入检测 默认是全部 注入时使用随机的 HTTP User-Agent 设置超时时间 读…...

编程日记 2023/3/29 13:08:56

初学多线程爬虫

多线程在爬虫中应用非常广泛&#xff0c;对于中大型项目来说很有必要&#xff0c;今天我将以初学者的姿态来完成一个简单的多线程爬虫程序。 1、如何认识多线程 计算机完成一项或多项任务&#xff0c;往往可以存在很高的并行度&#xff1a;若是多核处理器则天然的可以同时处理…...

编程日记 2023/3/29 13:03:54

python-实验报告-3

1、编写程序&#xff0c;用户输入一个五位整数&#xff0c;输出其千位和十位数字之和。 num int(input()) # 12345 s1 (num//1000)%10 s2 (num//10)%10sum s1 s2 print(sum)心得&#xff1a; 首先&#xff0c;程序通过 input() 函数获取用户输入的整数&#xff0c;保存在…...

编程日记 2023/3/29 12:58:53

00_托管网站在Tor网络上_Ubuntu主机

title: 托管网站在Tor网络上 urlname: 00_托管网站在Tor网络上_Ubuntu主机 date: 2017-04-24 03:03:03 tags: 小技巧 categories: [小技巧] 托管网站在Tor网络上&#xff08;Ubuntu主机&#xff09;https://www.t00ls.net/thread-44040-1-1.html 大部分人接触Tor网络是由Tor …...

编程日记 2023/3/29 12:53:51

个人练习-Leetcode-659. Split Array into Consecutive Subsequences

题目链接&#xff1a;https://leetcode.cn/problems/split-array-into-consecutive-subsequences/ 题目大意&#xff1a;给出一个非递减数列nums[]&#xff0c;判断其是否能被分割成若干个满足以下条件的子列&#xff1a; 长度大于等于3元素严格递增且只相差1 子列的含义是&…...

编程日记 2023/3/29 12:48:50

OTA升级差分包签名

制作差分包时添加-k <key_path>参数 ./build/tools/releasetools/ota_from_target_files -k <key_path> -i old.zip new.zip update.zip<key_path>如何取值&#xff1f;查看ProjectConfig.mk 如果MTK_SIGNATURE_CUSTOMIZATIONyes并且MTK_INTERNALno&#xf…...

编程日记 2023/3/29 12:43:49

使用Buildroot制作根文件系统

寒暄几句 学习了uboot、内核、busybox根文件系统&#xff0c;想着做一个音频播放器。最后发现好像busybox好像没有带aplay架构&#xff0c;这就很麻烦需要自己移植。为了简便我就找大佬沟通了一下&#xff0c;大佬推荐了Buildroot工具来制作根文件系统。 平台 开发板&#x…...

编程日记 2023/3/29 12:38:48

苏州免费推广的网站/百度网盘app下载

函数是组织好的&#xff0c;可重复使用的&#xff0c;用来实现单一&#xff0c;或相关联功能的代码段。函数能提高应用的模块性&#xff0c;和代码的重复利用率。你已经知道Python提供了许多内建函数&#xff0c;比如print()。但你也可以自己创见函数&#xff0c;这被叫做用户自…...

编程日记 2025/2/6 0:57:57

泰安做网站网络公司/营销培训课程有哪些

备胎说车400万车友关注。每天60秒&#xff0c;轻松懂汽车。 今天是备胎陪伴你的第 2159 天下方新增视频版&#xff0c;暂停、快进、倒退都没问题(和语音内容相同&#xff0c;选一个就行)&#xff0c;继续往下拉还有文字版&#xff0c;和更多精彩评论以下是文字版对…...

编程日记 2025/2/6 0:25:05

北京企业网站建设/百度产品大全

一、文件上传的html与PHP注意事项1.form要设定enctype属性&#xff0c;method设置为post。enctype设置为multipart/form-data后&#xff0c;图片上传信息会被列入$_FILES超全局数组&#xff0c;而非$_POST&#xff0c;从而达到真正的上传目的2.设定隐藏input&#xff1a;表示最…...

编程日记 2025/2/5 23:22:03

做三盛石材网站的公司/杭州seo公司排名

正则表达式正则表达式基本语法&#xff1a;贪婪模式&#xff1a;电话号码的案例&#xff1a;我的小案例&#xff1a;网站密码及时检验正则表达式基本语法&#xff1a; js和java正则的区别&#xff1a; js中\d即为java中的\d 贪婪模式&#xff1a; \b代表字符边界 第二个正则&a…...

编程日记 2025/2/5 16:44:24

做网站有哪些类型/长沙百度公司

查看文章EXE和DLL之间的区别是什么&#xff1f;2008/06/25 下午 02:43现在的Windows中&#xff0c;exe 和 dll 都是基于PE格式&#xff0c;exe 是通常的可执行文件&#xff0c;包含数据和代码&#xff0c;而 dll 是动态链接文件&#xff0c;也有可能是纯资源文件&#xff0c;只…...

编程日记 2025/2/5 15:37:40

门户网站建设请示/视频剪辑培训班一般学费多少

2016年蓝桥杯B组C/C 点击查看2016年蓝桥杯B组省赛试题&#xff08;无答案版&#xff09; 第一题&#xff1a;煤球数目 题解 有一堆煤球&#xff0c;堆成三角棱锥形。具体&#xff1a; 第一层放1个&#xff0c; 第二层3个&#xff08;排列成三角形&#xff09;&#xff0c; 第三…...

编程日记 2025/2/5 7:34:34