h5搜索页模板

风如白话
已于 2023-10-23 17:09:25 修改
阅读量2.3k
点赞数
分类专栏： aui 文章标签： aui 搜索 search
于 2020-07-02 17:47:12 首次发布
本文链接：https://blog.csdn.net/weixin_43838488/article/details/107089726
版权
aui 专栏收录该内容
9 篇文章
订阅专栏
h5搜索页模板

预览
带搜索历史功能
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>搜索</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.min.css"/>
	<style type="text/css">
		body{background: #FFF;}
		.aui-header-title{display: flex; align-items: center; right: 60px;}
		.aui-header-right{width: 60px;}
		.aui-header-right-text{font-size: 16px; color: #FFF;}
		.aui-header-search{width: 100%; height: 34px; overflow: hidden; border-radius: 30px; background: #FFF; display: flex; align-items: center;}
		.aui-header-search .iconsearch{width: 30px; height: 100%; line-height: 34px; font-size: 16px; color: #aaa; position: relative; left: 2px;}
		.aui-header-search #search-form{width: -webkit-calc(100% - 30px - 10px); width: calc(100% - 30px - 10px); height: 100%;}
		.aui-header-search #search{width: 100%; height: 100%; display: flex; align-items: center; font-size: 15px; color: #333; border: none;}
		.aui-header-search #search::-webkit-input-placeholder{color: #aaa;}
		.aui-header-search #search::-webkit-textfield-decoration-container{position: relative; top: -1px;}
		.aui-header-search #search[type="search" i]::-webkit-search-cancel-button{-webkit-appearance: none; position: relative; top: 1px; height: 20px; width: 20px; border-radius: 50%; background :#EBEBEB url("../../img/clear.png") no-repeat center; background-size: 14px 14px; }
		.search-history{width: 100%; padding: 15px; box-sizing: border-box;}
		.search-history-title{width: 100%; line-height: 50px; font-size: 18px; color: #333; font-weight: 600;}
		.search-history-clear{width: 40px; line-height: 50px; text-align: right; font-size: 14px; color: #aaa; display: inline-block; float: right;}
		.search-history-lists{width: 100%;}
		.search-history-list{height: 30px; line-height: 30px; padding: 0 15px; box-sizing: border-box; font-size: 14px; color: #646464; background: #EFEFEF; display: inline-block; vertical-align: top; margin: 0 15px 15px 0; border-radius: 30px;}
		.search-data{width: 100%; min-height: 100%; background: #F2F2F2;}
	</style>
</head>
<body>
	<div class="aui-container" id="app">
		<header class="aui-header">
			<a class="aui-header-left" @click.stop="aui.closeWin()"><i class="iconfont iconreturn"></i></a>
			<div class="aui-header-title">
				<div class="aui-header-search">
					<i class="iconfont iconsearch"></i>
					<form target="frameFile" id="search-form" @submit="search">
						<input type="search" ref="search" name="search" id="search" v-model="keywords" placeholder="大家都在搜:2019退役球星" value="" />
					</form>
				</div>
			</div>
			<div class="aui-header-right" v-cloak v-if="keywords" @click.stop="search"><span class="aui-header-right-text">搜索</span></div>
		</header>
		<div class="aui-content">
			<!-- 搜索历史 -->
			<div class="search-history" v-cloak v-if="historyData.length>0 && searchData.length==0">
				<div class="search-history-title">搜索历史 <div class="search-history-clear" @click.stop="clearHistory"><i class="iconfont icondelete"></i></div></div>
				<div class="search-history-lists">
					<div class="search-history-list" 
						v-for="item in historyData" 
						:data-keywords="item.keywords" 
						@click.stop="tapHistorySearch($event)"
					>{{item.keywords}}</div>
				</div>
			</div>
			<!-- 搜索结果 -->
			<div class="search-data" v-cloak v-if="searchData.length>0">
				<div class="aui-list" v-for="item in searchData" @click.stop="aui.openWin(item.url)">
					<div class="aui-list-left">{{item.name}}</div>
					<div class="aui-list-right"><i class="iconfont aui-btn-right iconright1"></i></div>
				</div>
			</div>
		</div>
	</div>
	<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../lib/jquery/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/aui.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">		
		window.onload = function(){
			apiready();
		}
		apiready = function() {
			var vm = new Vue({
				el: "#app",
				data: {
					keywords: '', // 搜索内容
					historyMax: 20, // 搜索历史最大条数
					historyData: [], // 搜索历史数据
					searchData: [], //搜索结果
				},
				created: function(){
					var _this = this;
					_this.$nextTick(function () {
						_this.$refs.search.focus();
					})
				},
				mounted: function() {
					var _this = this;
					this.getHistory();
		        },
		        updated: function () {
		            var _this = this;
		            _this.$nextTick(function () {
		
		            })
		        },
		        methods: {
					// 搜索事件
					search(){
						this.searchCallback(this.keywords);
					},
					//搜索回调事件
					searchCallback(keywords){
						this.setHistory(keywords);
						this.getHistory();
						//ajax...
						this.searchData = [ //测试
							{id: '0', name: '设备', url: '../../html/devices/devices-index.html'},
							{id: '1', name: '事件', url: '../../html/events/event-index.html'},
							{id: '2', name: '组件', url: '../../html/plugs/plugs-index.html'},
							{id: '3', name: '位置', url: '../../html/address/address-index.html'},
							{id: '4', name: '服务', url: '../../html/service/service-index.html'},
							{id: '5', name: '模板', url: '../demo-index.html'}
						];
					},
					// 搜索历史点击搜索
					tapHistorySearch(e){
						this.searchCallback(e.currentTarget.dataset.keywords);
					},
					// 存储搜索历史
					setHistory(keywords){
						//新数据插入到数组第一位
						this.historyData.splice(0,0,{"keywords": keywords});
						//数组去重
						var hash = {};
						this.historyData = this.historyData.reduce(function(item, next) {
							hash[next.keywords] ? '' : hash[next.keywords] = true && item.push(next);
							return item;
						}, []);
						//数据超出限制则删除最后一位
						if(this.historyData.length > this.historyMax){
							this.historyData.pop();
						}
						aui.setLocal("historyData", this.historyData);
					},
					// 获取搜索历史
					getHistory(){
						this.historyData = aui.getLocal('historyData') || [];
					},
					// 清空搜索历史
					clearHistory(){
						var _this = this;
						aui.confirm({
							title: '清空搜索历史',
							msg: '确定清空搜索历史吗？', 
							theme: 4, 
							btns: ['取消', '确定'],
						}, function(ret){
							if(ret.index == 1)
							{
								aui.removeLocal("historyData", this.historyData);
								_this.getHistory();
							}
						})
					},
					
		        }
			});
		}
	</script>
</body>
</html>