多条件搜索(单条件也可以)原生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();
}
目录
打赏
0
0
0
0
10
分享
相关文章
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
51 3
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
39 2
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
96 14
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
74 5
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
129 1
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
59 0
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
61 0
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
33 0

热门文章

最新文章