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 相关文章推荐
JS面向对象编程 for Cookie
Sep 19 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
使用AOP改善javascript代码
May 01 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
Openlayers学习之地图比例尺控件
Sep 28 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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
德生PL550的电路分析
2021/03/02 无线电
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
简单实现js上传文件功能
2017/08/21 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
python中append实例用法总结
2019/07/30 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
服装厂厂长职责
2013/12/16 职场文书
学校消防安全责任书
2014/07/23 职场文书
校园运动会广播稿
2014/10/06 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技