页面关键字实时搜索查询案例

实时搜索，先来看一下效果吧

如果这是你需要的效果：

直接上代码

如果不喜欢看文字的朋友，我写了个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}})}
}

粘贴复制，效果就出来了哦！

页面关键字实时搜索查询案例相关推荐

微信小程序实时搜索并高亮关键字
微信小程序实现实时搜索并高亮关键字的功能效果一.效果图二.实现流程: 1.在文本框中输入关键字key,如"比赛",检索出比赛相关的列表 key = 小程序 2.处理结果列表:在 ...
微信小程序带清除按钮和搜索记录的实时搜索页面
近期开发小程序遇到个需求,需要在Input框中加一个清除按钮清除input框中的内容以及实时搜索页面效果(未输入内容): 有内容时样式: wxml代码: <view class='contai ...
php实现关键字搜索mysql数据_PHP实现多个关键词搜索查询功能示例
本文实例讲述了PHP实现多个关键词搜索查询功能.分享给大家供大家参考,具体如下: PHP对于数据库的搜索主要通过使用SQL语句中的like子句来实现.如果同时搜索多个关键词,可以使用union子句来将 ...
爬虫入门—requests模块基础之关键字搜狗搜索信息页面爬取
爬虫入门-requests模块基础之关键字搜狗搜索信息页面爬取 Author: Labyrinthine Leo Init_time: 2021.02.16 Key Words: Spider.r ...
静态html页面关键字搜索高亮
静态html页面关键字搜索高亮最近项目要实现一个页面关键字搜索,刚好上网找了一款不错的插件,叫mark.js,官网地址,下面演示一个基于jq的案列,这个插件可以不依赖任何插件也可以实现这个功能,详情 ...
JS模拟京东搜索框案例模拟京东快递单号查询案例
模拟京东搜索框案例 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
数据库关键字搜索查询html,js实现搜索框关键字智能匹配代码
只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在 ...
微信小程序之页面内搜索查询功能
文章目录一.效果演示二.如何操作三.项目demo地址四.参考链接一.效果演示二.如何操作具体操作可以参考博客原生微信小程序,搜索框(search)组件和微信小程序页面内搜索查询(无后台) ...
快递100快递实时快递查询接口API案例代码
一.实时快递查询接口 1.1 请求地址 https://poll.kuaidi100.com/poll/query.do 1.2 请求类型 post 1.3 输入参数请求参数(header) 名称 ...

页面关键字实时搜索查询案例

实时搜索，先来看一下效果吧

页面关键字实时搜索查询案例相关推荐

最新文章

热门文章