用户列表组合条件查找

HTML部分:

<!DOCTYPE html>
<html><body><head><meta charset="UTF-8"/><title></title> <link rel="stylesheet" href="test.css" /></head><div class="wrapper"><div class="search"><input type="text" class = "search_box" placeholder = "请输入用户名"><p><span sex = "m">Male</span><span sex = "f">Female</span><span sex = "a" class = "active">All</span></p></div><div class="userList"><!-- 选项动态生成 --><ul></ul></div></div><script type="text/javascript">/*渲染的数据*/var personArr = [{name:'王飞',src:'3.png',des:'帅',sex:'m'},{name:'李颖',src:'4.png',des:'美',sex:'f'},{name:'王秀琴',src:'1.png',des:'漂亮',sex:'f'},{name:'刘宝玲',src:'5.png',des:'温柔 飞',sex:'f'},{name:'王虎',src:'2.png',des:'矮胖',sex:'m'},{name:'田飞飞',src:'7.png',des:'善良',sex:'f'},{name:'陈良宇',src:'6.png',des:'酷',sex:'m'},  ]var oUl = document.getElementsByTagName('ul')[0],OInput = document.getElementsByClassName('search_box')[0],oP = document.getElementsByTagName('p')[0];/* Dom树渲染 每次触发事件，Dom树都要重新渲染一次*/function renderPage(list){var str = '';list.forEach((el,index)=> {str += `<li><img src = "./img/`+ el.src + `"><p>` + el.name + `</p><p>` + el.des + `</p></li>`});oUl.innerHTML = str}renderPage(personArr);/* 存储当前的状态：text即input中的内容 和 性别的选项 */var state = {text:'',sex:'a',}//根据input筛选内容OInput.oninput = function(){state.text = this.value; //将input的内容存储到状态机中renderPage(lastFilter())}//根据文字筛选function filterText(text,arr){return arr.filter(function(ele,index){return ele.name.indexOf(text) > -1})}//根据点击span筛选性别oP.addEventListener('click',function(e){if(e.target.nodeName == 'SPAN'){state.sex = e.target.getAttribute('sex'); //将性别存储到状态机中document.getElementsByClassName('active')[0].className = null;e.target.className = 'active';renderPage(lastFilter())}},false)//根据性别筛选function filterSex(sex,arr){if(sex == 'a'){return arr}else{return arr.filter(function(ele,index){return sex == ele.sex})}  }//合并 性别和input内容的选项function combineFilterFunc(obj,arr){return function(){var lastArr = arr;for(prop in obj){lastArr = obj[prop](state[prop],lastArr)}return lastArr}}var lastFilter = combineFilterFunc({text:filterText,sex:filterSex},personArr)</script></body>
</html>

CSS部分:

*{margin:0;padding:0;
}
.wrapper{width:500px;margin:100px auto;border:1px solid #000;
}
.search{padding:10px;
}
.search_box{width:200px;border:1px solid #ccc;border-radius:4px;padding:10px; vertical-align:middle;
}
.search p{display:inline-block; vertical-align:middle;margin-left:10px;
}
.search p span{padding:8px;border-radius:4px;color:orange;cursor: pointer;
}
.search .active{color:#fff;background:orange;
}
.userList ul li{padding:10px;border-bottom:1px solid #ccc;list-style:none;overflow:hidden;
}
.userList ul li img{float:left;width:50px;height:50px;
}
.userList ul li p {margin-left:70px;
}

用户列表组合条件查找相关推荐

js if判断多个条件_EXCEL一对多条件查找显示多个结果（INDEX+SMALL+IF+ROW函数组合）...
这是萌二很用心梳理编辑的一篇文,看到我的标题前面冠上了[tree],被EXCEL大咖论坛收录进知识树,很开心.你的努力总会有机会被看到,共勉! 这是个万金油公式,谁用了谁知道! [INDEX+SMAL ...
Redis实现在线用户列表(按登录时间排序、可查询、踢人)
前言在日常开发中,我们有时候需要对在线用户进行管理,由于登录信息是可以过期的,那么使用RDBMS存储有点不合时宜,所以NoSQL存储更为合理.网上找了一些资料,但貌似似乎都不太完备,以下为个人理解的 ...
【Java Swing/散列表】散列表实现电话号码查找系统——问题汇总分享
说明:本文为我在做课设时遇到的问题汇总,解决方法多数来自网络,因深感到处搜索解决方法不易,所以做成汇总.因搜索时没有记录每个答案来源网站,如有侵权,请联系我.感谢无私分享的每一个人. 题目:设计散列表 ...
linux编程参数列表,Linux编程 14 文件权限(用户列表passwd，用户控制shadow，useradd模板与useradd命令参数介绍)...
一. 概述 linux安全系统的核心是用户账户. 创建用户时会分配用户ID(UID). UID是唯一的,但在登录系统时不是用UID,而是用登录名.在讲文件权限之之前,先了解下linux是怎样处理用户账 ...
excel按条件查询mysql_Excel中实现多条件查找的15种方法
如下图所示,根据第9行的产品和型号,从上面表中查找"销售数量",结果如C10所示 1.SUM函数公式{=SUM((A2:A6=A9)*(B2:B6=B9)*C2:C6)} 公式简 ...
Java实践（五）仿照用户列表查询写查自己的库
一.实践目的仿照用户列表查询,练习写个查库程序,类似于下图功能二.实验步骤 1.创建库.表,编一个数据 2.创建javaee工程添加tomcat,修改端口及虚拟目录 3.导入jar包 4.复制we ...
EXCEL实用技巧-多条件求和、多条件计数、多条件查找
多条件求和.多条件计数.多条件查找--多了去了! Excel中用countif和countifs统计符合条件的个数 Excel CountIfs函数轻松组合多条件,含不为空和不等于的例子接近完美的E ...
JAVA实现QQ:实现文字聊天、QQ用户登录、拉取在线用户列表、无异常退出、私聊、发文件、下载文件、离线留言、服务端推送新闻等功能（后端无界面，Utilty源码在后面、）
这个仿QQ项目是参考韩顺平老师的多线程课程做的,因为个人觉得非常有意义特别是让我对多线程通信又了一个新的理解因此我准备写一篇总结(如果觉得视频太长可以参考下): 具体视频地址:大家给韩老师一键三连[韩 ...
腾讯智慧校园-获取用户列表失败
今天测试接口时,发现获取用户列表的接口总是请求参数不全,但是请求的参数按照官方的API写的,并没有少参数后来查找原因,发现和其他的方法对比,少了两个参数 objectid=OBJECTID objT ...

用户列表组合条件查找

用户列表组合条件查找相关推荐

最新文章

热门文章