h5搜索页模板
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>總結
- 上一篇： 我的世界JAVA刷怪范围_《我的世界》只
- 下一篇： py学习，列表，判断，循环