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)//渲染函数
  }
})


目录
相关文章
|
11月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
JavaScript 算法 前端开发
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
前端开发 JavaScript
JS-数据筛选
JS-数据筛选
160 7
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
588 1
|
JavaScript 搜索推荐
JS中的模糊查询功能
JS中的模糊查询功能
247 1
|
JavaScript 数据安全/隐私保护 Python
网易云音乐搜索接口JS逆向: Params、encSecKey加密和AES实战
网易云音乐搜索接口JS逆向: Params、encSecKey加密和AES实战
1640 4
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
|
JavaScript 前端开发 安全
前程无忧搜索接口 JS 逆向:阿里系acw_sc__v2和Sign加密
前程无忧搜索接口 JS 逆向:阿里系acw_sc__v2和Sign加密
884 0

热门文章

最新文章