js多条件筛选(可单条件搜索还可以模糊查询)

简介: js多条件筛选(可单条件搜索还可以模糊查询)

先看重点部分:

其中data是需要过滤的数据;condition是过滤条件——需要对其进行处理转换成和数据相关的格式,说直白点就是获取值然后以对象的形式处理,最后在调用渲染函数

整体代码

// 搜索
let seek = {};
$("#seek").click(function() {
  $("#list_operation").show()
  console.log($("#items").val());
  $("#paging").show()
  seek = {};
  let namess = $("#names").val()
  let tele = $("#tel").val();
  let item = $("#items").val();
  let date_time = $("#date").val();
  // let namess = $("#names").val()
  // let namess = $("#names").val()
  // let namess = $("#names").val()
  seek = {
    name: namess,
    tel: tele,
    nowdate: date_time,
    title: item
  }
  //@param condition 过滤条件
  //@param data 需要过滤的数据
  let filter = (condition, data) => {
    return data.filter(item => {
      return Object.keys(condition).every(key => {
        return String(item[key]).toLowerCase().includes(
          String(condition[key]).trim().toLowerCase())
      })
    })
  }
  let search_list = filter(seek, number_render);
  console.log(search_list);
  if (search_list.length == 0 || search_list == []) {//这个判断可以不加,但要有下面的渲染函数
    $("#list_centers").html(`<div style="text-align:left">您要搜索的数据离家出走了~~</div>`)
    $("#paging").hide()
    $("#list_operation").hide()
  } else {
    number_data = search_list
    number_of_pages = 0;
    fun(number_data, number_of_pages)//渲染函数
  }
})


目录
相关文章
|
8月前
|
JavaScript 前端开发
JS如何配合input框实现模糊搜索
JS如何配合input框实现模糊搜索
199 2
|
4月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
110 1
|
4月前
|
前端开发 JavaScript
JS-数据筛选
JS-数据筛选
53 7
|
4月前
|
JavaScript 搜索推荐
JS中的模糊查询功能
JS中的模糊查询功能
69 1
|
4月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
|
6月前
|
JavaScript 数据安全/隐私保护 Python
网易云音乐搜索接口JS逆向: Params、encSecKey加密和AES实战
网易云音乐搜索接口JS逆向: Params、encSecKey加密和AES实战
460 4
|
7月前
|
数据采集 算法 JavaScript
揭开JavaScript字符串搜索的秘密:indexOf、includes与KMP算法
JavaScript字符串搜索涵盖`indexOf`、`includes`及KMP算法。`indexOf`返回子字符串位置,`includes`检查是否包含子字符串。KMP是高效的搜索算法,尤其适合长模式匹配。示例展示了如何在数据采集(如网页爬虫)中使用这些方法,结合代理IP进行安全搜索。代码示例中,搜索百度新闻结果并检测是否含有特定字符串。学习这些技术能提升编程效率和性能。
169 1
揭开JavaScript字符串搜索的秘密:indexOf、includes与KMP算法
|
6月前
|
JavaScript 前端开发 安全
前程无忧搜索接口 JS 逆向:阿里系acw_sc__v2和Sign加密
前程无忧搜索接口 JS 逆向:阿里系acw_sc__v2和Sign加密
188 0
|
6月前
|
JavaScript
js团队筛选功能
js团队筛选功能
26 0
|
6月前
|
前端开发 JavaScript 开发者
fuse.js前端搜索简单使用的三个案例
通过这三个例子可以看出,Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能,无论是简单的列表搜索还是实时的搜索建议,都能够高效、精确地提供给用户所需的信息。
284 0

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    53
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62