js搜索功能的实现(前端JavaScript实现本地模糊搜索功能的方法实例)
类别:编程学习 浏览量:348
时间:2021-10-16 00:48:41 js搜索功能的实现
前端JavaScript实现本地模糊搜索功能的方法实例目录
- 一、项目前景
- 二、涉及知识点
- Object.assign()的用法
- filter()方法
- indexOf()模糊查询
- DEMO完整代码如下:
- 总结
随着vue、react在实际开发中应运越来越广泛,前端对数据的处理越来越多。这篇文章主要目的就是为了对服务端返回的数据进行处理,按照条件进行模糊查询,从而减少向服务端发送请求的次数,来提高性能和用户体验。下面以一个简单的DEMO,来实现模糊查询的功能:
测试用的数据如下:
var data = [{ "title": "你的失恋修复期有多长?", "title_image": "https://img.doutuimao.net/dtmimg/b7c9ec393414982682e5a477eb995b55", "desc": "美食餐饮测试一下你的失恋修复期有多长", "id": "2", "num": 951357, "flag": "01" }, { "title": "你的撒娇指数有多高?", "title_image": "https://img.doutuimao.net/dtmimg/60d8ed86d1f72357c194506270c72ac1", "desc": "美食餐饮会撒娇的女人最好命,你有多会撒娇?你撒起娇来魅力又是怎么样的?快来测测吧!", "id": "3", "num": 963258, "flag": "01" }, { "title": "你未来的结婚方式?", "title_image": "https://img.doutuimao.net/dtmimg/538632e75159ce8e586778d289c66a11", "desc": "相信很多人都对自己未来的结婚方式充满期待,想知道你未来的结婚方式吗?", "id": "4", "num": 879564, "flag": "01" }, ]
Object.assign()的用法
Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target)。它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象。
// 处理原始数组 let arrnew = data.map((item, index) => { return Object.assign({}, { 'desc': item.desc, }) })
filter()方法
filter()方法用于过滤数组元素。该方法创建一个新数组, 其中包含通过所提供函数实现的测试的所有元素。filter()不会对空数组进行检测,也不会改变原始数组。
indexOf()模糊查询
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。与filter()方法配合,可以检测数组中是否包含输入的值,并返回。
var newData = arrnew.filter(item => { if (item.desc.indexOf(value) > -1) { //indexOf方法中如果xxx.indexOf("")返回值为0 return item } return newData })
DEMO完整代码如下:
<li class="wrap"> <input type="text" id="demo"> <ul id="newsBox"> </ul> </li> function creat() { var value = input.value; var html = ""; let arrnew = data.map((item, index) => { return Object.assign({}, { 'desc': item.desc, }) }) var newData = arrnew.filter(item => { if (item.desc.indexOf(value) > -1) { //indexOf方法中如果xxx.indexOf("")返回值为0 return item } return newData }) if (newData.length > 0) { for (var i = 0; i < newData.length; i++) { html += `<li>${newData[i].desc}</li>` } } else { html += `<li>暂无数据</li>` } ul.innerHTML = html; } creat() input.onchange = function(e) { creat() }
到此这篇关于JavaScript实现本地模糊搜索功能的文章就介绍到这了,更多相关JS本地模糊搜索内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- html和js代码结合(JS、CSS和HTML实现注册页面)
- 在html中使用javascript实例代码(原生 JS+CSS+HTML 实现时序图的方法)
- 详解JS中你不知道的各种循环测速(详解JS中你不知道的各种循环测速)
- nodejs子进程调试(Node.js实现断点续传)
- nodejs 内部模块代码(详解Node.js如何处理ES6模块)
- html markdown 超链接对比(html+js 实现markdown编辑器效果)
- videojs播放流媒体(video.js支持m3u8格式直播的实现示例)
- react组件分析(react-diagram 序列化Json解读案例分析)
- jsfor循环是什么意思(JavaScript中三种for循环语句的使用总结for、for...in、for...of)
- php多维数组怎么转换json(php实现的数组转xml案例分析)
- js如何编辑数组对象里的数组(JS操作对象数组实现增删改查实例代码)
- js实现继承的五种(JavaScript继承的三种方法实例)
- jquery遍历json字符串
- node.js缓存区(如何利用node实现静态文件缓存详解)
- js网站前端效果(JS如何让你的移动端交互体验更加优秀)
- phpstudy 目录浏览宽度(JspStudy如何设置PHP根目录可编辑)
- 苹果自研芯片跑分对比 A16芯片排名靠后,M1系列霸榜(苹果自研芯片跑分对比)
- X86处理器的梦魇 苹果M1自研芯片到底有多强(苹果M1自研芯片到底有多强)
- 泰剧《爱欲之神》Boom kitkong和Great合体杂志(泰剧爱欲之神Boomkitkong和Great合体杂志)
- 素人恋爱综艺火药味十足 男生为赢得芳心集体扯头花,真是出好戏(素人恋爱综艺火药味十足)
- 《囧妈》为何受抵制 春节七部影片撤档背后的责任与博弈(囧妈为何受抵制)
- 提醒 2019年起河南驾考要开设科目五 官方回应来了(2019年起河南驾考要开设科目五)
热门推荐
- css3设置元素的边框图像(详解CSS3 用border写 空心三角箭头 两种写法)
- apache静态化怎么用(apache中访问不了伪静态页面的解决方法)
- docker的postgres镜像包(Docker中运行PostgreSQL并推荐几款连接工具)
- js条件语句教学(浅谈JS如何写出漂亮的条件表达式)
- php上传文件的要求(PHP 文件上传限制问题)
- 织梦模板被挂了怎么办(详解简单修改DEDECMS织梦模板防止网站挂马的教程)
- python接口管理系统(基于Python实现用户管理系统)
- vue项目上线教程(vue项目中使用骨架屏的方法)
- thinkphp框架切换数据库(ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例)
- dede如何联动筛选(dede 标签调用大全 dedecms 隔五行一个分割线等标签调用)