案例详解_使用javascript编写用户列表组合条件筛选

本文介绍如何使用原生js编写用户列表组合条件筛选？可以通过按钮和输入文字进行组合条件筛选的功能，以下用代码将详细介绍，先上一张效果图：
这里使用数组模拟后台数据（可用ajax请求后台数据）：
var person = [ { name: '王小妹', src: '01pic.jpg', sex: 'male', des: '漂亮的妹子'}, { name: '金小妹', src: '02pic.jpg', sex: 'male', des: '漂亮的程序媛'}, { name: '陈小华', src: '07pic.jpg', sex: 'female', des: '相互学习'}, { name: '马爱国', src: '08pic.jpg', sex: 'female', des: '喜欢猫'}, { name: '邓小茜', src: '04pic.jpg', sex: 'male', des: '喜欢运动'}, { name: '马学习', src: '06pic.jpg', sex: 'female', des: '喜欢看书'}]
主要html结构：
<body> <p class="wrapper"> <p class="search"> <input type="text" placeholder="请输入用户名" id="input"> <ul id="searchul"> <li class="active" sex = "all">all</li> <li sex = "male">male</li> <li sex = "female">female</li> </ul> </p> <p class="userlist"> <ul id="list">   </ul> </p> </p> <script src="./searchingdata.js"></script></body>
思路及js核心代码：
1）渲染dom结构：使用foreach()方法遍历数组，找出符合条件的数据，有几条数据就生成几个li结构代码块，然后把生成的li结构插入ul中去；
var listul = document.getelementbyid('list');var oinp = document.getelementbyid('input');var sul = document.getelementbyid('searchul');//渲染dom结构，遍历数组使用foreach()方法function render(list){ var str = ''; list.foreach(function(ele, index){ str += '<li><img src="./images/'+ ele.src +'" alt="">\ <span class="name">'+ ele.name +'</span>\ <span class="des">'+ ele.des +'</span></li>'; }); listul.innerhtml = str;}
2）单一输入框文字筛选：获取input输入框输入的值，绑定一个oninput事件，使用使用数组过滤筛选方法filter()进行文本过滤；
//获取input输入的value值，需绑定一个oninput事件，获取过滤结果后渲染oinp.oninput = function(){ var text = this.value; //state.text = this.value; //组合条件筛选 render(filtertext(text, person)); //单一筛选、渲染 //render(addfn(filterfn,person)); //组合条件筛选、渲染}//输入文本过滤function filtertext(val, arr){ var farr = arr.filter(function(ele, index){ if(ele.name.indexof(val) !== -1){ return true; } }) return farr;}
3）单一点击按钮筛选：点击事件绑定在ul上，由li触发
//绑定点击事件sul.addeventlistener('click', function(e){ if(e.target.tagname == 'li'){ var sex = e.target.getattribute('sex'); //state.sex = e.target.getattribute('sex'); //组合条件筛选 document.getelementsbyclassname('active')[0].classname = ''; //修改点击按钮的样式 e.target.classname = 'active'; //修改点击按钮的样式 render(filtersex(sex, person)); //render(addfn(filterfn,person));//组合条件筛选、渲染 }})//点击按钮筛选function filtersex(sex, arr){ if(sex == 'all'){ return arr; }else{ var sarr = arr.filter(function(ele, index){ if(sex == ele.sex){ return true; } }) return sarr; }}
4）组合条件筛选：通过两个对象的prop把组合对象（输入框和按钮）和筛选函数联系起来
//组合筛选，在一个筛选结果的基础上筛选（修改传入数组arr），参数lastarr上一次筛选返回的数组//筛选条件：实现筛选条件的函数var filterfn = { text: filtertext, sex: filtersex}//筛选条件：之前的筛选的值text、sex 要改为 state.text state.sexvar state = { text: '', sex: 'all'}//组合function addfn(obj, arr){ var lastarr = arr; for(var prop in obj){ lastarr = obj[prop](state[prop], lastarr); console.log(lastarr); } return lastarr;}
相关文章：
javascript前端数据多条件筛选功能实现代码
javascript实现前端数据多条件筛选功能的实例
相关视频：
使用javascript-李炎恢javascript视频教程
以上就是案例详解_使用javascript编写用户列表组合条件筛选的详细内容。

案例详解_使用javascript编写用户列表组合条件筛选

推荐信息