成品圖如下所示：

?

先搭建HTML結構：

1 <div class="wrapper"> 2 <div class="sWrapper"> 3 <input type="text" class="sText"> 4 <span class="btn" sex="m">Male</span> 5 <span class="btn" sex="f">Female</span> 6 <span class="btn active" sex="a">All</span> 7 </div> 8 <div class="flWrapper"> 9 <ul> 10 35 </ul> 36 </div> 37 </div>

CSS樣式：

1 *{ 2 margin:0px; 3 padding: 0px; 4 list-style: none; 5 } 6 .wrapper{ 7 width:400px; 8 padding:10px 15px; 9 border: 1px solid #ccc; 10 margin:100px auto 0px; 11 border-radius: 6px; 12 } 13 img{ 14 width: 50px; 15 height: 50px; 16 } 17 .wrapper .sWrapper{ 18 margin-bottom: 20px; 19 } 20 .wrapper .sWrapper input{ 21 width: 220px; 22 height: 25px; 23 padding-left:10px; 24 outline: none; 25 border-radius:4px; 26 border:1px solid #777; 27 } 28 .wrapper .sWrapper .btn{ 29 cursor: pointer; 30 color: #3c8dff; 31 padding: 0px 5px; 32 border-radius: 4px; 33 } 34 .wrapper .sWrapper .btn.active{ 35 color:#fff; 36 background: #3c8dff; 37 } 38 .wrapper .flWrapper ul li { 39 position: relative; 40 padding-left: 60px; 41 padding-top: 10px; 42 padding-bottom: 10px; 43 border-bottom:1px solid #999; 44 } 45 .wrapper .flWrapper ul li img { 46 position: absolute; 47 left: 0px; 48 top:10px; 49 } 50 .wrapper .flWrapper ul li .name { 51 margin-bottom: 10px; 52 } 53 .wrapper .flWrapper ul .li .des { 54 font-size: 12px; 55 color:#666; 56 }

需要創建的文件如下所：

?

開始寫JS代碼：

index.js

1 //模擬后端傳過來的數據表單 2 var personArr = [ 3 { name: '大鋼鐵', src: '../ing/gnag.PNG', des: 'I am gang', sex: 'm', age: 18 }, 4 { name: '小女巫', src: '../ing/fei.PNG', des: 'I am fei', sex: 'f', age: 19 }, 5 { name: '大綠巨', src: '../ing/lv.PNG', des: 'I am lv', sex: 'm', age: 20 }, 6 { name: '大寡婦', src: '../ing/hei.PNG', des: 'I am black wife', sex: 'f', age: 23 }, 7 { name: '小隊長', src: '../ing/mei.PNG', des: 'I am USA', sex: 'm', age: 24 }, 8 ]; 9 10 11 12 // 初始變量 13 var oUl = document.getElementsByTagName('ul')[0]; 14 var oInput = document.getElementsByTagName('input')[0]; 15 16 17 18 store.subscribe(function () { 19 RenderPage(lastFilterArr(personArr)); 20 }); 21 22 23 // 數據渲染頁面 24 function RenderPage(data) { 25 //遍歷數組長度添加 26 var htmlStr = ''; //設定一個空字符串接收數據 27 oUl.innerHTML = ''; // 28 data.forEach(function (ele, index, self) { 29 htmlStr = htmlStr + '<li><img src="' + ele.src + '"><img/><p class="name">' + ele.name + '</p><p class="dse">' + ele.des + '</p></li>'; 30 //遍歷出后端里面的數據 31 }); 32 oUl.innerHTML = htmlStr; //把數據以HTML形式付給頁面 33 } 34 RenderPage(personArr);// 執行渲染函數 35 36 37 38 //添加行為 39 oInput.oninput = debounce(function () { //輸入觸發過濾 40 store.dispatch({ type: 'text', value: this.value }); 41 //傳到渲染頁面的函數中，重新繪制頁面 42 }, 1000);//最后再加上防抖功能，也就是相當于套上一個定時器，輸入文本1秒后再執行搜索 43 44 45 46 47 48 //btn style 49 var oBtnArr = [].slice.call(document.getElementsByClassName('btn'), 0); 50 //把btn類數組轉為數組 51 52 var lastActiveBtn = oBtnArr[2]; 53 54 oBtnArr.forEach(function (ele, index, self) { 55 ele.onclick = function () { 56 changeActive(this); 57 RenderPage(filterArrBySex(personArr, this.getAttribute('sex'))); 58 store.dispatch({ type: 'sex', value: this.getAttribute('sex') }); 59 //渲染過濾后的性別 60 } 61 }); 62 63 //點擊按鈕切換樣式 64 function changeActive(curActiveBtn) { 65 curActiveBtn.className = 'btn active'; 66 lastActiveBtn.className = 'btn'; 67 lastActiveBtn = curActiveBtn; 68 }

?寫入過濾函數

文本過濾：

filterArrByText.js 1 // text -- 根據文本來過濾 2 function filterArrByText(data, text){ 3 if(!text){ //非文本則返回數據表單 4 return data; 5 }else{ //否則進入一下進行過濾 6 return data.filter(function(ele, index){ 7 return ele.name.indexOf(text) != -1; 8 //返回indexOf文本不等于-1的文本 9 //如果輸入的文本不在數據表單名字里面indexOf則會返回-1 10 }); 11 } 12 }

?

性別過濾：?

filterArrBySex.js 1 // sex -- 根據性別過濾 2 function filterArrBySex (data, sex){ 3 if(sex == 'a'){ 4 return data; 5 //如果傳入的是a，就返回a 6 }else{ 7 return data.filter(function (ele, index, self){ 8 return ele.sex == sex; 9 //如果sex等于傳入的sex，就返回相應的sex 10 }) 11 } 12 }

?

?合并過濾函數

combineFilter.js 1 function combineFilter (config){ 2 return function (data){ 3 for(var prop in config){ //循環過濾這兩個函數 4 //依次過濾這兩個函數，先過濾文本數據后返回給data 5 //data拿到的過濾一次后的數據再次過濾一次把性別再過濾一次 6 data = config[prop](data, store.getState(prop)); 7 } 8 return data; //最后過濾完返回出來 9 } 10 } 11 //接收過濾函數傳到combineFilter這個文件，接著合并等于lastFilterArr 12 var lastFilterArr = combineFilter({ 13 text: filterArrByText, 14 sex: filterArrBySex 15 })

?

再加入設計模式

（變量不裸露方便管理）

createStore.js 1 function createStore (initialState) { 2 var stata = initialState || {}; 3 var list = []; 4 //獲取 5 function getState (type) { 6 return stata[type]; 7 } 8 //處理 9 function dispatch (action) { 10 stata[action.type] = action.value; 11 //調用之前訂閱過的函數 12 list.forEach(function(ele){ 13 ele(); 14 }) 15 } 16 //訂閱 17 function subscribe (func) { 18 list.push(func); 19 20 } 21 return { 22 getState:getState, 23 dispatch:dispatch, 24 subscribe:subscribe 25 } 26 } 27 28 var store = createStore({text: '', sex: 'a'});

?

最后再加上防抖功能

debounce.js 1 //防抖功能，就是搜索框輸入文字1秒后再進行搜索 2 function debounce (handler, delay){ 3 var timer = null; 4 return function (e) { 5 var _self = this, _arg = arguments; 6 clearTimeout(timer); 7 timer = setTimeout(function () { 8 handler.apply(_self, _arg); 9 },delay); 10 } 11 }

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

?

轉載于:https://www.cnblogs.com/yangpeixian/p/10837378.html

總結

以上是生活随笔為你收集整理的原生JavaScript实战之搜索框筛选功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。