利用数组的filter方法实现。
一个给定的后台数据包含了很多属性（姓名，性别，年龄等等）对此我们要进行特定的数据筛选。
var
person = [
{
name:
'刘小华',
src:
'1.jpg',
sex:
'male',
des:
'漂亮的女孩子' },
{
name:
'王花',
src:
'2.jpg',
sex:
'male',
des:
'漂亮的程序猿' },
{
name:
'陈军',
src:
'3.jpg',
sex:
'female',
des:
'我是一个学霸' },
{
name:
'王华',
src:
'4.jpg',
sex:
'female',
des:
'我喜欢游泳' },
{
name:
'陈思思',
src:
'5.jpg',
sex:
'male',
des:
'我喜欢看电影' },
{
name:
'马学习',
src:
'6.jpg',
sex:
'female',
des:
'我爸我妈爱学习' },
{
name:
'马美丽',
src:
'7.jpg',
sex:
'male',
des:
'我妈是美丽得妈妈' },
{
name:
'马冬梅',
src:
'7.jpg',
sex:
'male',
des:
'我妈是美丽得妈妈' }
];
var
oUl =
document.
getElementById(
'list1'); //获取HTML中的需要插入li的ul
var
oInp =
document.
getElementById(
'inp'); //获取输入姓名的输入框
var
sexUl =
document.
getElementsByClassName(
'list')[
0]; //获取性别选项框（ul里的li）
function
render(
list) {
var
str =
'';
list.
forEach(
function (
ele,
index) {
// ele.name/ele.src/ele.des
str +=
'<li>
\
<img src="./'+
ele.
src +
'" alt="">
\
<span class="name">'+
ele.
name +
'</span>
\
<span class="ms">'+
ele.
des +
'</span>
\
</li>'
})
oUl.
innerHTML =
str;
}
render(
person); //初始是渲染结构样式（没有进行筛选）
oInp.
oninput =
function () { //获取输入框的值
var
value =
this.
value;
render(
filterText(
value,
person));
//render(
addfn(
filter,
person)); 叠加筛选的写法
}
//根据输入框的值筛选出对应的新数组交给render方法进行渲染
function
filterText(
text,
arr) {
return
arr.
filter(
function (
ele) {
if (
ele.
name.
indexOf(
text) !== -
1) { //筛选出满足的数据
return
true;
}
})
}
//给性别选项添加点击事件
sexUl.
addEventListener(
'click',
function (
e) {
if (
e.
target.
tagName ==
'LI') {
var
sex =
e.
target.
getAttribute(
'sex');
render(
filterSex(
sex,
person));
//render(
addfn(
filter,
person)); 叠加筛选写法
}
})
//筛选出需要的性别
function
filterSex(
sex,
arr) {
if (
sex ==
'all') {
return
arr;
}
else {
return
arr.
filter(
function (
ele,
index) {
if (
sex ==
ele.
sex) {
return
true;
}
})
}
}
//根据内容筛选value--->filter筛选数组(newArr)-->新数组-->render(newArr)-->筛选渲染成功
以上能实现简单的筛选。但是我们需要的是能在姓名或者性别筛选后再次筛选。
叠加筛选：
//创建两个对象保存着筛选函数的函数名，一个保存着当前筛选状态的对象
var
filter = {
value :
filterText,
sex :
filterSex
}
var
state = {
value :
'',
sex :
'all'
}
//叠加筛选，lastArr开始保存着初始数据（因为没调用筛选功能）
function
addfn(
obj,
arr){
var
lastArr =
arr;
//再次调用时获取的是上次筛选出来的数据
for(
var
prop
in
obj){
lastArr =
obj[
prop](
state[
prop],
lastArr);
}
console.
log(
state[
prop]);
return
lastArr;
//调用筛选方法赋值给lastArr,这样就能实现多次筛选。
}
对于整体的封装和选项框的防抖问题。下次探讨~