多条件搜索(单条件也可以)原生js/jquery

简介: 多条件搜索(单条件也可以)原生js/jquery

jquery:

//创建一个对象用来存放条件
let seek = {};
//搜索按钮点击事件
$("#seek").click(function () {
//初始化一下对象
    seek = {};
//获取到用户想搜索的东西(不管有没有值或者空白字符)
    let search_name = $("#names").val()
    let shenfenz = $("#tel").val();
    let garde_input = $("#items").val()
    console.log(garde_input);
//将条件添加到对象里面
    seek = {
        name: search_name,
        rname: shenfenz,
        pname: garde_input,
    }
//下面的就是执行筛选的代码,两个注释不需要解开和删除
    //@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())
            })
        })
    }
//seek是条件,number_render是你的总数据,search_list是筛选完返回的数据
    let search_list = filter(seek, number_render);
    console.log(search_list);
//判断他返回的是否有数据,没有就显示问题,有就执行渲染函数
    if (search_list.length == 0 || search_list == []) {
        $("#list_centers").html("<div>您要搜索的数据离家出走了~~</div>")
        $("#paging").fadeOut()
    } else {
        number_data = search_list
        number_of_pages = 0;
        fun(number_data, number_of_pages)
    }
})

js:

//创建一个对象用来存放条件
let srr = {};
//搜索按钮点击事件
function reverse() {
//初始化一下对象
    srr = {};
//获取到用户想搜索的东西(不管有没有值或者空白字符)
    let input = document.getElementsByClassName('eattdi')[0].getElementsByTagName('input')[0].value;
    let inputs = document.getElementsByClassName('eattdi')[1].getElementsByTagName('input')[0].value;
    let inputss = document.getElementsByClassName('eattdi')[2].getElementsByTagName('input')[0].value;
    let inputsss = document.getElementsByClassName('eattdi')[3].getElementsByTagName('input')[0].value;
    let inputssss = document.getElementsByClassName('eattdi')[4].getElementsByTagName('input')[0].value;
    let inputsssss = document.getElementsByClassName('eattdi')[5].getElementsByTagName('input')[0].value;
    let inputssssss = document.getElementsByClassName('eattdit')[0].getElementsByTagName('input')[0].value;
    let inputsssssss = document.getElementsByClassName('eattdit')[1].getElementsByTagName('input')[0].value;
//将条件添加到对象里面
    srr = {
        name: inputssssss,
        education: input,
        title: inputs,
        sex: inputss,
        age: inputsssssss,
        status: inputsss,
        pname: inputssss,
        grade: inputsssss
    }
//下面的就是执行筛选的代码
    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())
            })
        })
    }
//srr是条件,dates是你的总数据,value是筛选完返回的数据
    valu = filter(srr, dates);
    console.log(valu);
//调用渲染函数传参
    arech();
}
相关文章
|
10天前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
2月前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
55 3
|
3月前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
42 2
|
4月前
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
100 14
|
4月前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
79 5
|
5月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
136 1
|
5月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
111 3
|
4月前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
62 0
|
5月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
62 0
|
5月前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
34 0

热门文章

最新文章