前端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完整代码如下:

<div class="wrap">
        <input type="text" id="demo">
        <ul id="newsBox">
        </ul>
</div>
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本地模糊搜索内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • javascript实现前端分页功能

    前言:今天给大家带来的是前端数据的分页功能,供大家参考,具体内容如下 先上一波效果图展示: 直接上代码:这里使用的是JavaScript来实现 关于代码详解都以注释的方式写在JavaScript里的 HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分页</title> <link rel="stylesheet&qu

  • JS实现前端页面的搜索功能

    效果图如下所示: <input type="text" id="campus" class="layui-input" onkeyup="ck(this.value);" placeholder="请输入要查找的英语屋">//输入触发框 <div class="layui-input-block layui-form" id="cam" lay-fi

  • JavaScript前端实现压缩图片功能

    为什么要前端来压缩图片 最近在做一个移动端h5上传图片的功能,本来这个功能并不复杂,只需要将图片文件通过axios传到服务端即可,但是考虑到现在手机设配的拍照功能十分强大,随便一张照片都能动辄五六兆,而服务端的要求是上传图片必须小于两兆,而且直接传这么大图片,带宽它也受不了,所以前端进行压缩图片就成了一个必要的环节. 压缩效果 首先介绍下压缩的大概流程 通过原生的input标签拿到要上传的图片文件 将图片文件转化成img元素标签 在canvas上压缩绘制该HTMLImageElement 将ca

  • 分享10个常见的JavaScript前端手写功能

    目录 1.防抖 2.节流 3.深拷贝 4.手写 Promise 5.异步控制并发数 6.继承 7.数组排序 8.数组去重 9.获取 url 参数 10.事件总线 | 发布订阅模式 1.防抖 function debounce(fn, delay) {   let timer   return function (...args) {     if (timer) {       clearTimeout(timer)     }     timer = setTimeout(() => {  

  • 前端JavaScript实现本地模糊搜索功能的方法实例

    目录 一.项目前景 二.涉及知识点 Object.assign()的用法 filter()方法 indexOf()模糊查询 DEMO完整代码如下: 总结 一.项目前景 随着vue.react在实际开发中应运越来越广泛,前端对数据的处理越来越多.这篇文章主要目的就是为了对服务端返回的数据进行处理,按照条件进行模糊查询,从而减少向服务端发送请求的次数,来提高性能和用户体验.下面以一个简单的DEMO,来实现模糊查询的功能: 测试用的数据如下: var data = [{ "title": &

  • jQuery实现模糊搜索功能的方法分析

    本文实例讲述了jQuery实现模糊搜索功能的方法.分享给大家供大家参考,具体如下: 功能一:关键字搜索 总结: 1.搜索出的结果,前台先要清空原有表格 $("#tbody").empty; 2.后台返回的json格式字符串 js eval 专成对象 var stus = eval("(" + msg + ")"); 在循环进行字符串拼接到表格上 $("#tbody").html(str); $("#btn"

  • javascript读取本地文件和目录方法详解

    JavaScript是网页制作中离不开的脚本语言,依靠它,一个网页的内容才生动活泼.富有朝气.但也许你还没有发现并应用它的一些更高级的功能吧?比如,对文件和文件夹进行读.写和删除,就象在VB.VC等高级语言中经常做的工作一样.怎么样,你是否需要了解这方面的知识?那就请跟我来,本文将详细描述如何使用Javascript语言进行文件操作. 一.功能实现核心:FileSystemObject 对象 其实,要在Javascript中实现文件操作功能,主要就是依靠FileSystemobject对象.在详

  • JavaScript简单表格编辑功能实现方法

    本文实例讲述了JavaScript简单表格编辑功能实现方法.分享给大家供大家参考.具体如下: <html> <head> <script type="text/javascript"> function getInnerHTML() { alert(document.getElementById("tr2").innerHTML); } function insCell() { var x=document.getElementB

  • javascript省市级联功能实现方法实例详解

    本文实例讲述了javascript省市级联功能实现方法.分享给大家供大家参考,具体如下: 初步实现方法: <html> <head> <script language="javascript"> function changecity(){ var province = document.form1.selprovince.value; var newoption1,newoption2; switch(province){ case "四

  • vue中利用pinyin-pro纯前端实现拼音的模糊搜索功能

    目录 1.安装配置插件 2.编写工具类方法 3.调用方法 1.安装配置插件 pinyin-pro官网网址: pinyin-pro - npm (npmjs.com) npm 安装 npm install pinyin-pro 项目中引入 import { pinyin } from 'pinyin-pro'; 2.编写工具类方法 定义三个变量: // 双向绑定搜索框,由用户输入的数据 inputProvince: 'ninxia', // 从后台获取的,筛选前的总数据 totalProvince

  • javascript实现添加附件功能的方法

    在邮件中我们经常用到添加附件,现在简单的应用下: 效果图: 实现原理: 采用table标签的,主要思想:采用table标签方式 1.点击文字之后,就自动创建(原先是自己/创建,现在拿到table对象之后,可以insertRow() insertCell())创建行和列 2.删除的时候通过父节点来移除 核心代码: function creatMail(){ var tab=document.getElementById("tabid"); var tr=tab.insertRow();/

  • javascript设置和获取cookie的方法实例详解

    本文实例讲述了javascript设置和获取cookie的方法.分享给大家供大家参考,具体如下: 1. 设置cookie function setCookie(cookieName,cookieValue,cookieExpires,cookiePath) { cookieValue = escape(cookieValue);//编码latin-1 if(cookieExpires=="") { var nowDate = new Date(); nowDate.setMonth(n

  • JS实现换肤功能的方法实例详解

    本文实例讲述了JS实现换肤功能的方法.分享给大家供大家参考,具体如下: 首先准备HTML页面如下: <div id="container"> <div id="header"> <h3>无人驾驶要征服世界,得先解决这些问题</h3> </div> <div id="nav"> <input type="button" id="blue&qu

  • JavaScript函数内部属性和函数方法实例详解

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 函数是对象,有自己的属性和方法 .首先通过console下输出的函数属性方法来直观的看一下: 函数内部属性只要包括两个特殊的对象:arguments和this. 函数属性包括:length和prototype 函数方法(非继承)包括:apply()和call() 继承而来的函数方法:bind().toString().toLocaleString().valueOf() 其他的目前不熟,后面再补充 1. 函数内部属性 在函数内部,有两

随机推荐