多条件搜索(单条件也可以)原生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();
}
相关文章
|
18天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
29 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
1月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
1月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
43 3
|
27天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
30 0
|
1月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
15 0
|
2月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
37 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
1月前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
14 0
|
1月前
|
JavaScript 前端开发
JavaScript三级联动jQuery写法
JavaScript三级联动jQuery写法
|
1月前
|
JavaScript 前端开发
JavaScript 树状菜单栏jQuery写法
JavaScript 树状菜单栏jQuery写法
|
2月前
|
JSON JavaScript 前端开发
jQuery下拉框搜索模糊查询实现
【9月更文挑战4天】
114 10