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

成品图如下所示：

先搭建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实战之搜索框筛选功能相关推荐

React Table 表格组件使用教程排序、分页、搜索过滤筛选功能实战开发
React Table 表格组件使用教程 react-table 安装和使用 React Table 表格排序功能 React Table 表格搜索过滤筛选功能 React Table 表格分页功能 ...
站长工具|百度搜索框提示功能
百度向站长开放免费"百度搜索框"代码和"百度搜索框提示"代码.只需进行简单的设置, 即可将" 百度搜索框( 带提示功能)"功能快速加入到您的 ...
chosen jquery ajax搜索,基于chosen插件实现人员选择树搜索自动筛选功能
要实现的功能截图: 要求: 1.点击输入框可以根据拼音自动筛选数据,并且标记已经选择的数据,没有结果的时候提示,相应的更新左边树状态 2.勾选树右侧树的复选框左侧出现相应的内容我用到的插件 vue+ ...
java搜索页面历史记录,使用JS location实现搜索框历史记录功能
首先,来看下效果图(样式什么的就不必吐槽了哈) html代码搜索记录: //用于保存记录信息 css代码 * { margin: 0; padding: 0; } input { border: 0 ...
JavaScript仿新浪微博搜索框功能
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title> ...
php多条件筛选前台功能,JavaScript前端数据多条件筛选功能实现代码
有时候也会需要在前端进行数据筛选,增强交互体验.当数据可用的筛选条件较多时,把逻辑写死会给后期维护带来很*烦.下面是我自己写的一个简单的筛选器,筛选条件可以根据数据包含的字段动态设置.本文主要为大家详 ...
原生JavaScript+WebSocket+nodejs实现聊天室功能
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取. WebSocket也是前端非常重要的技术栈. 现在各种网站.App.小程序都伴有即时通信的功能.WebSoc ...
ajax实现搜索提示源码,Jquery实现搜索框提示功能示例代码
博客的前某一篇文章中http://www.jb51.net/article/35175.htm写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发现,真的反应很慢,数 ...
SearchView搜索框的功能与用法
SearchView的功能以及用法使用SearchView,可以让用户在文本框内输入文字,并允许通过监听器监控用户的输入,当用户输入完成后提交搜索时,也可以通过监听器执行实际的搜索. 使用Searc ...

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

原生JavaScript实战之搜索框筛选功能相关推荐

最新文章

热门文章