原生JavaScript实战之搜索框筛选功能

成品图如下所示：

先搭建HTML结构：

    <div class="wrapper">
        <div class="sWrapper">
            <input type="text" class="sText">
            <span class="btn" sex="m">Male</span>
            <span class="btn" sex="f">Female</span>
            <span class="btn active" sex="a">All</span>
        </div>
        <div class="flWrapper">
            <ul>
                
            </ul> 
        </div>
    </div>

CSS样式：

*{
            margin:0px;
            padding: 0px;
            list-style: none;
        }
        .wrapper{
            400px;
            padding:10px 15px;
            border: 1px solid #ccc;
            margin:100px auto 0px;
            border-radius: 6px;
        }
        img{
             50px;
            height: 50px;
        }
        .wrapper .sWrapper{
            margin-bottom: 20px;
        }
        .wrapper .sWrapper input{
             220px;
            height: 25px;
            padding-left:10px; 
            outline: none;
            border-radius:4px;
            border:1px solid #777;
        }
        .wrapper .sWrapper .btn{
            cursor: pointer;
            color: #3c8dff;
            padding: 0px 5px;
            border-radius: 4px;
        }
        .wrapper .sWrapper .btn.active{
            color:#fff;
            background: #3c8dff;
        }
        .wrapper .flWrapper ul li {
            position: relative;
            padding-left: 60px;
            padding-top: 10px;
            padding-bottom: 10px;
            border-bottom:1px solid #999;
        }
        .wrapper .flWrapper ul li img {
            position: absolute;
            left: 0px;
            top:10px;
        }
        .wrapper .flWrapper ul li .name {
            margin-bottom: 10px;
        }
        .wrapper .flWrapper ul .li .des {
            font-size: 12px;
            color:#666;
        }

需要创建的文件如下所：

开始写JS代码：

index.js

//模拟后端传过来的数据表单
var personArr = [
    { name: '大钢铁', src: '../ing/gnag.PNG', des: 'I am gang', sex: 'm', age: 18 },
    { name: '小女巫', src: '../ing/fei.PNG', des: 'I am fei', sex: 'f', age: 19 },
    { name: '大绿巨', src: '../ing/lv.PNG', des: 'I am lv', sex: 'm', age: 20 },
    { name: '大寡妇', src: '../ing/hei.PNG', des: 'I am black wife', sex: 'f', age: 23 },
    { name: '小队长', src: '../ing/mei.PNG', des: 'I am USA', sex: 'm', age: 24 },
];



// 初始变量
var oUl = document.getElementsByTagName('ul')[0];
var oInput = document.getElementsByTagName('input')[0];



store.subscribe(function () {
    RenderPage(lastFilterArr(personArr));
});


// 数据渲染页面 
function RenderPage(data) {
    //遍历数组长度添加
    var htmlStr = ''; //设定一个空字符串接收数据
    oUl.innerHTML = ''; //
    data.forEach(function (ele, index, self) {
        htmlStr = htmlStr + '<li><img src="' + ele.src + '"><img/><p class="name">' + ele.name + '</p><p class="dse">' + ele.des + '</p></li>';
        //遍历出后端里面的数据
    });
    oUl.innerHTML = htmlStr; //把数据以HTML形式付给页面
}
RenderPage(personArr);// 执行渲染函数



//添加行为
oInput.oninput = debounce(function () { //输入触发过滤
    store.dispatch({ type: 'text', value: this.value });
    //传到渲染页面的函数中，重新绘制页面
}, 1000);//最后再加上防抖功能，也就是相当于套上一个定时器，输入文本1秒后再执行搜索





//btn style
var oBtnArr = [].slice.call(document.getElementsByClassName('btn'), 0);
//把btn类数组转为数组

var lastActiveBtn = oBtnArr[2];

oBtnArr.forEach(function (ele, index, self) {
    ele.onclick = function () {
        changeActive(this);
        RenderPage(filterArrBySex(personArr, this.getAttribute('sex')));
        store.dispatch({ type: 'sex', value: this.getAttribute('sex') });
        //渲染过滤后的性别
    }
});

//点击按钮切换样式
function changeActive(curActiveBtn) {
    curActiveBtn.className = 'btn active';
    lastActiveBtn.className = 'btn';
    lastActiveBtn = curActiveBtn;
}

 写入过滤函数

文本过滤：

filterArrByText.js

// text -- 根据文本来过滤
function filterArrByText(data, text){
    if(!text){ //非文本则返回数据表单
        return data;
    }else{  //否则进入一下进行过滤
        return data.filter(function(ele, index){
            return ele.name.indexOf(text) != -1;
            //返回indexOf文本不等于-1的文本
            //如果输入的文本不在数据表单名字里面indexOf则会返回-1
        });
    }
}

性别过滤： 

filterArrBySex.js

 // sex -- 根据性别过滤
 function filterArrBySex (data, sex){
    if(sex == 'a'){
        return data;
        //如果传入的是a，就返回a
    }else{
        return data.filter(function (ele, index, self){
            return ele.sex == sex;
            //如果sex等于传入的sex，就返回相应的sex
        })
    }
}

 合并过滤函数

combineFilter.js

function combineFilter (config){
    return function (data){
        for(var prop in config){ //循环过滤这两个函数
            //依次过滤这两个函数，先过滤文本数据后返回给data
            //data拿到的过滤一次后的数据再次过滤一次把性别再过滤一次
            data = config[prop](data, store.getState(prop));
        }
        return data; //最后过滤完返回出来
    }
}
//接收过滤函数传到combineFilter这个文件，接着合并等于lastFilterArr
var lastFilterArr = combineFilter({
    text: filterArrByText,
    sex: filterArrBySex
})

再加入设计模式

（变量不裸露方便管理）

createStore.js

function createStore (initialState) {
    var stata = initialState || {};
    var list = [];
    //获取
    function getState (type) {
        return stata[type];
    }
    //处理
    function dispatch (action) {
        stata[action.type] = action.value;
        //调用之前订阅过的函数
        list.forEach(function(ele){
            ele();
        })
    }
    //订阅
    function subscribe (func) {
        list.push(func);
        
    }
    return {
        getState:getState,
        dispatch:dispatch,
        subscribe:subscribe
    }
}

var store = createStore({text: '', sex: 'a'});

最后再加上防抖功能

debounce.js

//防抖功能，就是搜索框输入文字1秒后再进行搜索
function debounce (handler, delay){
    var timer = null;
    return function (e) {
        var _self = this, _arg = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            handler.apply(_self, _arg);
        },delay);
    }
}

 谢谢观看，有大佬经过请指出意见