多条件搜索(单条件也可以)原生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();
}


相关文章
|
1天前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
14 2
|
23天前
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
53 14
|
24天前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
31 5
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
40 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
2月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
2月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
55 3
|
1月前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
33 0
|
2月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
28 0
|
2月前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
15 0
|
前端开发 JavaScript
javascript 搜索并高亮显示
2015年12月22日 15:45:08 星期二 情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮, 或者将不匹配的隐藏掉 效果图: html:  1 名称: 2 代码: 3 ...
820 0