原生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{
            width:400px;
            padding:10px 15px;
            border: 1px solid #ccc;
            margin:100px auto 0px;
            border-radius: 6px;
        }
        img{
            width: 50px;
            height: 50px;
        }
        .wrapper .sWrapper{
            margin-bottom: 20px;
        }
        .wrapper .sWrapper input{
            width: 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);
    }
}

 謝謝觀看，有大佬經過請指出意見