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跨页面保存变量做菜单的方法
Jan 17 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
用node.js写一个jenkins发版脚本
May 21 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
js获取图片的base64编码并压缩
Dec 05 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
PHP 文件上传全攻略
2010/04/28 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
Javascript模块模式分析
2008/05/16 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
Python 如何访问外围作用域中的变量
2016/09/11 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
django框架ModelForm组件用法详解
2019/12/11 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
应届生体育教师自荐信
2013/10/03 职场文书
绝对经典成功的大学生推荐信
2013/11/08 职场文书
大学生创业策划书
2014/02/02 职场文书
小学生检讨书大全
2014/02/06 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
5行Python代码实现一键批量扣图
2021/06/29 Python
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫