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中“+=”的应用
Feb 02 Javascript
Mootools 1.2教程 函数
Sep 15 Javascript
javascript hashtable 修正版 下载
Dec 30 Javascript
extjs4 treepanel动态改变行高度示例
Dec 17 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
vuejs如何配置less
Apr 25 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
javascript实现画板功能
Apr 12 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
php的4种常见运行方式
2015/03/20 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
js 函数调用模式小结
2011/12/26 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
python 类详解及简单实例
2017/03/24 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
岳父生日宴会答谢词
2014/01/13 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
小学四年级作文之写景
2019/08/23 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
中国古风插画师排行榜:夏达第一,第三是阴阳师姑获鸟皮肤创作者
2022/03/18 国漫