javascript實現搜尋篩選功能例項程式碼
阿新 • • 發佈：2020-11-13
案例樣式即功能
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:'我很好看',{name:'劉金磊',src:'images/4.png',des:'你沒有見過陌生人的臉',{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搜尋篩選功能內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！