javascript实现搜索筛选功能实例代码


Posted in Javascript onNovember 12, 2020

案例样式即功能

javascript实现搜索筛选功能实例代码

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
  <title>Document</title>
</head>
<body>
  <div class="wrapper">
    <div class="search">
      <input type="text" placeholder="请输入用户名">//搜索框
      <p>//性别筛选按钮
        <span sex='m'>male</span>
        <span sex='f'>female</span>
        <span sex='a' class="active">all</span>
      </p>
    </div>
    <div class="user-list">//搜索列表,有js渲染添加
      <ul>
      </ul>
    </div>
  </div>
  <script src="index.js"></script>
</body>
</html>

CSS代码:

*{
  margin:0;
  padding:0;
  list-style: none;
}
.wrapper{
  width:400px;
  border:1px solid #ccc;
  margin: 100px auto;
  border-radius:4px;
}
.wrapper .search{
  width:100%;
  height:50px;
  line-height:50px;
}
.wrapper .search input{
  padding:10px 15px;
  border-radius:4px;
  margin-left:30px;
  border:1px solid #ccc;
  outline:none;

}
.wrapper .search p{
  display:inline-block;
}
.wrapper .search p span{
  color:#38f;
  padding:3px 5px;
}
.wrapper .search p span.active{
  color:#fff;
  background-color:#38f;
  border-radius: 4px;
}
.wrapper .user-list{
  width:100%;
}
.wrapper .user-list ul{
  width:100%;
}
.wrapper .user-list ul li{
  border-bottom:1px solid #ccc;
  position:relative;
  padding:10px 0;
  margin:0 30px;
}
.wrapper .user-list ul li img{
  height:40px;
  width:40px;
  position:absolute;
}
.wrapper .user-list ul li p{
  margin-left:50px;
  width:300px;
  color:rgb(117, 114, 114);
}

Javascript代码:

var oul=document.getElementsByTagName("ul")[0];
var oinput=document.getElementsByTagName("input")[0];
var text='',sex='a';//要将text和sex写在全局变量里面,这样可以记录上次操作的值为后续的页面渲染作准备;
var personArr=[
  {name:'王刚',src:'images/1.png',des:'颈椎不好',sex:'m'},
  {name:'刘颖',src:'images/2.png',des:'我是谁',sex:'f'},
  {name:'王秀英',src:'images/3.jpg',des:'我很好看',sex:'f'},
  {name:'刘金磊',src:'images/4.png',des:'你没有见过陌生人的脸',sex:'m'},
  {name:'刘飞仙',src:'images/5.jpg',des:'瓜皮刘',sex:'m'}
];
//页面渲染
function randerlist(arr){
  var str='';
  arr.forEach(function(elem,index){
    str+='<li>\
    <img src="'+elem.src+'">\
    <p class="username">'+elem.name+'</p>\
    <p class="des">'+elem.des+'</p>\
  </li>'
  });
  oul.innerHTML=str;
}
randerlist(personArr);
//为性别筛选按钮设置点击事件,并获取每一次点击后的结果进行页面渲染。
var spans=document.getElementsByTagName("p")[0].children;
for(var i=0;i<spans.length;i++){
  (function(j){
    spans[j].onclick=function(){
      //每点击一个按钮就要重新设置css属性
      for(var k=0;k<spans.length;k++){
        spans[k].className="";
      }
      this.className='active';
      /*不要直接var lastArr=filterSex(this.innerHTML[0],personArr);,一定要写sex=this.innerHTML[0];
      因为当点击了性别筛选按钮并输入姓名之后进行了一次渲染,再次删除姓名此时text=‘',需要重新渲染,但并没有记
      录上次点击性别筛选按钮后的sex值,此时他会默认为'a';*/
      sex=this.innerHTML[0];
      var lastArr=filterSex(sex,personArr);
      lastArr=filterText(text,lastArr);
      randerlist(lastArr);
    }
  })(i);
}
//获取搜索框内容,并重新渲染
oinput.oninput=function(){
  text=this.value;
  var newArr=filterText(text,personArr);
  newArr=filterSex(sex,newArr);
  randerlist(newArr);
}
//根据文本框的内容进行筛选,并返回筛选后的数组
function filterText(text,arr){
  //filter函数,筛选作用,将return true的elem拼成一个数组并返回
  return arr.filter(function(elem,index){
    if(elem.name.indexOf(text)!=-1){
      return true;
    }else{
      return false;
    }
  });
}
//根据性别进行筛选,并返回筛选后的数组
function filterSex(sex,arr){
    if(sex=='a'){
      return arr;
    }else{
      return arr.filter(function(elem,index){
        if(elem.sex==sex){
          return true;
        }else{
          return false;
        }
      })
    }
}

总结

到此这篇关于javascript实现搜索筛选功能的文章就介绍到这了,更多相关javascript搜索筛选功能内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
jquery延迟对象解析
Oct 26 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
vue之数据交互实例代码
Jun 20 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
JS async 函数的含义和用法实例总结
Apr 08 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
JSON stringify方法原理及实例解析
Oct 23 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 #Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 #Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 #Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 #Javascript
在vue中使用image-webpack-loader实例
Nov 12 #Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 #Javascript
JavaScript ES 模块的使用
Nov 12 #Javascript
You might like
综合图片计数器
2006/10/09 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
js中this的用法实例分析
2015/01/10 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
[41:08]2014 DOTA2国际邀请赛中国区预选赛 HGT VS NE
2014/05/22 DOTA
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
python链接Oracle数据库的方法
2015/06/28 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
python机器学习实现决策树
2019/11/11 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
自主招生自荐信
2013/12/08 职场文书
班主任班级寄语大全
2014/04/04 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python