参考资料：https://www.jianshu.com/p/b927e4e85d7c
vue实现搜索历史
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
<style type="text/css">
body {
background-color: #FFFFFF;
}
</style>
</head>
<body>
<div id="app">
<header class="mui-bar mui-bar-nav">
<a onclick="javascript:history.back(-1);"
class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">搜索内容</h1>
</header>
<div style="height: 50px;"></div>
<div style="display: flex;margin: 10px auto 0px auto;margin-left: 20px;">
<div style="width: 80%;position: relative;">
<!-- 搜索按钮 -->
<input type="submit" value=""
style="border: none;background-color: transparent;background-image:url(images/ss.png);width: 25px;height: 25px;position: absolute;left: 15px;top: 7px;background-size: 100% 100%;">
<!-- 搜索文本 -->
<input v-model="input"
style="border: none;border-radius: 20px;width: 100%;background-color: #DCDCDC;padding-left: 20%;"
type="text" placeholder="请输入你想要的">
</div>
<div>
<button style="border: none;height: 40px;color: #FF0000;font-size: 17px;"
@click="handleSearchResult(input)">搜索</button>
</div>
</div>
<div>
<div
style="display: flex;justify-content: space-between;width: 85%;margin: 0 auto;align-items: center;font-size: 15px;">
<div>热门搜索</div>
</div>
<div style="display: flex;width: 85%;flex-wrap: wrap;margin: 0 auto;margin-top: 2%;">
<div style="width: auto;background-color: #FFE5E5;color: #FF0000;padding: 2%;border-radius: 10px;font-size: 14px;margin: 2% 2% 0px 0px;"
v-for="(i,index) in rmlist" :key="index">{{i}}</div>
</div>
</div>
<div style="margin-top: 20px;">
<div
style="display: flex;justify-content: space-between;width: 85%;margin: 0 auto;align-items: center;font-size: 15px;">
<div>历史搜索</div>
<div style="color: #FF0000;" @click="clearHistory">清空</div>
</div>
<div style="display: flex;width: 85%;flex-wrap: wrap;margin: 0 auto;margin-top: 2%;">
<div v-if="historyList.length == 0" style="color: #CCCCCC;font-size: 12px;">暂无搜索记录</div>
<div v-else v-for="(historyItem, index) in historyList" :key="index"
@click="handleSearchResult(historyItem)"
style="width: auto;background-color: #FFE5E5;color: #FF0000;padding: 2%;border-radius: 10px;font-size: 14px;margin: 2% 2% 0px 0px;">
{{historyItem}}
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
input: '',
historyList: [],
rmlist: ['男装', '女装', '休闲裤', '鸿星尔克', '蔬菜']
},
mounted() {
if (localStorage.getItem('localHistory') !== null) {
this.historyList = localStorage.getItem('localHistory').split('|')
}
},
methods: {
handleSearchResult (val) {
if (val === '') {
alert('请输入搜索内容！')
return
}
this.setlocalHistory(val) // 将搜索值加入本地localStorage
this.historyList = localStorage.getItem('localHistory').split('|') // 从本地localStorage取出搜索历史并展示
this.input = '' // 清空输入框
// alert(`跳转至 ${val} 搜索结果页`) // 跳转至搜索结果页
},
setlocalHistory (val) {
val = val.trim()
let localHistory = localStorage.getItem('localHistory')
if (localHistory === null) {
localStorage.setItem('localHistory', val) // 若未设置过则直接设置本地存储
}else {
let localHistoryArray = localHistory.split('|').filter(item => item != val) // 删除搜索历史中与本次输出重复项
if (localHistoryArray.length > 0) {
localHistory = val + '|' + localHistoryArray.join('|') // 新增记录
}
if (localHistory.split('|').length > 10) { // 最大历史搜索记录10条
localHistoryArray = localHistory.split('|')
localHistoryArray.pop() // 删除最旧一项
localHistory = localHistoryArray.join('|')
}
localStorage.setItem('localHistory', localHistory) // 存入本地
}
},
clearHistory () {
localStorage.removeItem('localHistory') // 清空搜索历史
this.historyList = []
}
}
})
</script>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.init()
</script>
</body>
</html>
网友评论