实时搜索，先来看一下效果吧
如果这是你需要的效果：
直接上代码
如果不喜欢看文字的朋友，我写了个demo已经上传到github，可以直接clone下来看代码
https://github.com/Meganyw/search_actual-time.git.
一、HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>页面实时搜索</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<div class="wrapper">
<div class="search">
<input type="text" class="inp" placeholder="关键字搜索">
<ul class="btn-list">
<li class="active" sex='all'>全部</li>
<li sex='boys'>男生</li>
<li sex='girls'>女生</li>
</ul>
</div>
<ul class="user">
</ul>
<h3 class="prompt">空空如也</h3>
</div>
</div>
<script src="createStore.js"></script>
<script src="demo.js"></script>
</body>
</html>
二、CSS
*{
padding:0;
margin:0;
list-style:none;
outline:none;
}
body,html{
background:#f7f7f7;
}
.wrapper{
width:600px;
height:850px;
overflow: auto;
background:#fff;
padding:15px;
margin:30px auto;
border-radius:5px;
box-shadow:0 1px 6px rgba(0,0,0,0.2)
}
.wrapper .search{
width:100%;
height:40px;
}
.wrapper .search .inp{
width:320px;
height:40px;
border:1px solid #ec9129;
line-height:40px;
padding:0 15px;
border-radius:3px;
float: left;
}
.wrapper .search .btn-list{
float: right;
height:40px;
}
.wrapper .search .btn-list li{
float: left;
height:40px;
line-height:40px;
text-align:center;
width:60px;
border:1px solid #0bc7b7;
border-radius:3px;
margin-left:10px;
color:#0bc7b7;
cursor:pointer;
}
.wrapper .search .btn-list .active{
background:#0bc7b7;
color:#fff;
}
.wrapper .user{
width:100%;
margin-top:30px;
}
.wrapper .user li{
background:#f8f8f8;
border-radius:3px;
height:60px;
margin-bottom:15px;
padding:10px;
cursor: pointer;
transition: all ease-in 0.2s;
margin-bottom:15px;
}
.wrapper .user li:hover{
background:#dff3eb;
}
.wrapper .user li:hover .tit .motto{
}
.wrapper .user li .head-img{
height:60px;
width:60px;
border-radius:50%;
overflow: hidden;
float: left;
box-shadow:0 1px 4px rgba(0,0,0,0.2);
}
.wrapper .user li .head-img img{
width:100%;
}
.wrapper .user li .tit{
float: right;
height:100%;
width:85%;
margin-top:5px;
}
.wrapper .user li .tit .name{
font-size: 18px;
font-weight:bolder;
margin-bottom:8px;
}
.wrapper .user li .tit .motto{
font-size: 14px;
color:#5c5c5c;
text-overflow:ellipsis;
white-space: nowrap;
overflow: hidden;
}
.wrapper .prompt{
color:#d4d4d4;
height:50px;
text-align: center;
line-height: 50px;
background:#f8f8f8;
border-radius:3px;
display: none;
}
三、createStore.js
function createStore(state){
var list=[]
function getState(){
return state;
}
function change(action){
state[action.type]=action.value;
list.forEach(function(ele,index){
ele()
})
}
function addFn(hander){
list.push(hander)
}
return {
getState:getState,
change:change,
addFn:addFn
}
}
四、demo.js
我自己模拟的数据，先把数据贴出来
var person = [
{
name: '江哲',
src: 'img/1.png',
motto: '须交有道之人，莫结无义之友。饮清静之茶，莫贪花色之酒。开方便之门，闲是非之口。',
sex: 'boys'
},
{
name: '欧阳锋',
src: 'img/1.png',
motto: '“我欲”是贫穷的标志。事能常足，心常惬，人到无求品自高。',
sex: 'boys'
},
{
name: '江小白',
src: 'img/1.png',
motto: '势不可使尽，福不可享尽，便宜不可占尽，聪明不可用尽。',
sex: 'boys'
},
{
name: '程浩然',
src: 'img/1.png',
motto: '做事不必与俗同，亦不宜与俗异。做事不必令人喜，亦不可令人憎。',
sex: 'boys'
},
{
name: '李志成',
src: 'img/1.png',
motto: '人之心胸，多欲则窄，寡欲则宽。',
sex: 'boys'
},
{
name: '王嫣然',
src: 'img/1.png',
motto: '人的一生也可以是那一杯香醇的酒，慢慢地享受，细细地品味，自然也可以韵出生命的味道。',
sex: 'girls'
},
{
name: '程美',
src: 'img/1.png',
motto: '大千世界，人生百态。如何面对人生，是快乐，是悲伤？不能让你的人生去决定，也不是任由命运摆布着你，应该自己把握！',
sex: 'girls'
},
{
name: '李梅芳',
src: 'img/1.png',
motto: '人的一生是由色彩交织而成的，有善良的白，沉静的蓝，热情的红，希望的绿和温柔的紫。它们散发出的光彩，则是我们的生命。！',
sex: 'girls'
},
{
name: '南宫小婉',
src: 'img/1.png',
motto: '生活就是一块调色板，你选择了你喜欢的色彩，那么其色就更加美丽，人生就似一碗汤，你选择了你喜欢的味道，你才感觉有滋有味……',
sex: 'girls'
},
{
name: '江苏颖',
src: 'img/1.png',
motto: '势不可使尽，福不可享尽，便宜不可占尽，聪明不可用尽。',
sex: 'girls'
}
]
下面是功能实现的重要代码：
var inp = document.getElementsByClassName('inp')[0],
btnList = document.getElementsByClassName('btn-list')[0],
prompt = document.getElementsByClassName('prompt')[0],
user = document.getElementsByClassName('user')[0];
function createList(list) {
var str = '';
list.forEach(function (ele, index) {
str += '<li>\
<div class="head-img">\
<img src='+ ele.src + ' alt="">\
</div>\
<div class="tit">\
<h1 class="name">'+ ele.name + '</h1>\
<p class="motto">'+ ele.motto + '</p>\
</div>\
</li>'
})
user.innerHTML = str
}
createList(person);
var state = createStore({ text: '', sex: 'all' })
state.addFn(function () {
createList(perArr());
anti(show());
})
inp.oninput = anti(getInput, 1000)
function getInput() {
state.change({ type: 'text', value: this.value });
}
function anti(hander, delay) {
var timer = null;
return function () {
var _self = this,
args = arguments;
clearTimeout(timer)
timer = setTimeout(function () {
hander.apply(_self, args)
}, delay)
}
}
function show() {
if (user.children.length == 0) {
prompt.style.display = 'block'
} else {
prompt.style.display = 'none'
}
}
function addFn(obj, arr) {
return function () {
var lastArr = arr;
for (prop in obj) {
lastArr = obj[prop](state.getState()[prop], lastArr)
}
return lastArr
}
}
var perArr = addFn({ text: filterText, sex: filterSex }, person)
btnList.onclick = function (e) {
var tar = e.target;
if (tar.tagName == 'LI') {
document.getElementsByClassName('active')[0].className = '';
tar.className = 'active';
state.change({ type: 'sex', value: tar.getAttribute('sex') })
}
}
function filterText(text, arr) {
return arr.filter(function (ele, index) {
if (ele.name.indexOf(text) != -1 || ele.motto.indexOf(text) != -1) {
return true
}
})
}
function filterSex(sex, arr) {
if (sex == 'all') {
return arr
} else {
return arr.filter(function (ele, index) {
if (ele.sex == sex) {
return true
}
})
}
}
粘贴复制，效果就出来了哦！
5829
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
