多条件搜索(单条件也可以)原生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
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
28 1
|
11天前
|
JSON JavaScript 前端开发
|
24天前
|
JavaScript 数据安全/隐私保护 Python
网易云音乐搜索接口JS逆向: Params、encSecKey加密和AES实战
网易云音乐搜索接口JS逆向: Params、encSecKey加密和AES实战
22 4
|
26天前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
27 2
|
1月前
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
14 1
|
18天前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
28 0
|
23天前
|
JavaScript 前端开发 安全
前程无忧搜索接口 JS 逆向:阿里系acw_sc__v2和Sign加密
前程无忧搜索接口 JS 逆向:阿里系acw_sc__v2和Sign加密
25 0
|
1月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
26 0
|
Web App开发 JSON JavaScript
JavaScript及jQuery入门 【下】
什么是JavaScript 概述 JavaScript是一门世界上最流行的脚本语言 Java、JavaScript 历史 ECMAScript可以理解为是JavaScript的一个标准 最新版本已经到es6~ 但是大部分浏览器还停留在支持es5代码上 开发环境--线上环境,版本不一致 快速入门 引入
|
存储 JavaScript 前端开发
JavaScript及jQuery入门【上】
什么是JavaScript 概述 JavaScript是一门世界上最流行的脚本语言 Java、JavaScript 历史 ECMAScript可以理解为是JavaScript的一个标准 最新版本已经到es6~ 但是大部分浏览器还停留在支持es5代码上 开发环境--线上环境,版本不一致 快速入门 引入