原生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);
     }
 }

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