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 相关文章推荐
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
Sep 16 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
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
图片之间的切换
2006/06/26 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
js选项卡的制作方法
2017/01/23 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
微信小程序实现留言板
2018/10/31 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python调用C语言开发的共享库方法实例
2015/03/18 Python
Python探索之修改Python搜索路径
2017/10/25 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
Python实现GIF图倒放
2020/07/16 Python
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
nginx设置资源请求目录的方式详解
2022/05/30 Servers