<template>
<div>
<!-- 搜索框 -->
<van-search
v-model="inpVal"
placeholder="请输入搜索关键词"
show-action @input="addlist"
>
<template #left>
<van-icon name="arrow-left" />
</template>
<template #action>
<van-button
type="danger"
size="small"
@click="addshowlist"
@keydown.enter="addshowlist"> 搜索</van-button>
</template>
</van-search>
<!-- 显示搜索内容 -->
<div style="100%">
<span class="serach-del">
<span>最近搜索</span>
<span @click="delicon">
<van-icon name="delete" />
</span>
</span>
<!-- 搜索内容展示 -->
<div class="serach-showlist">
<van-tag class="serach-showlist-child" v-for="(item, index) in list" :key="index">{{item}}</van-tag>
</div>
</div>
<!-- 显示搜索内容 -->
<div class="serach-cont" v-show="isShow">
<van-cell-group style="100%;height:100%">
<van-cell v-for="(item,index) in tiplist" :key="index" :title="item">
<template #default>
<van-tag>标签</van-tag>
</template>
</van-cell>
</van-cell-group>
</div>
</div>
</template>
<script>
export default {
data() {
return {
inpVal: "",
isShow: false,
list: [],
tiplist: []
};
},
created() {
if (localStorage.list0617 != undefined) {
this.list = JSON.parse(localStorage.list0617);
}
},
watch:{
tiplist(newval){//监听是否有搜索内容
if (newval.length > 0) {
this.isShow = true;
} else {
this.isShow = false;
}
}
},
methods: {
addshowlist() {//点击搜索时执行的
if (this.list.includes(this.inpVal)) {
return;
} else if (this.inpVal.trim() == "") {
return;
}
this.list.push(this.inpVal);
this.inpVal = "";
this.isShow=false
localStorage.list0617 = JSON.stringify(this.list);
},
// 删除搜索内容事件
delicon() {
this.$dialog.confirm({
title: "确认要清空内容吗？",
message: "确定",
closeOnClickOverlay:true
})
.then(() => {
this.list=[]
localStorage.list0617 = JSON.stringify(this.list0617);
})
.catch(() => {
console.log('no')
});
},
addlist() {
this.$axios
.get("http://47.94.231.184/book/auto-complete", {
params: {
query: this.inpVal
}
})
.then(res => {
var str = res.data.keywords;
// console.log(str)
if (str.length > 13) {
for (var i = 0; i <= 13; i++) {
this.tiplist.push(str[i]);
}
} else {
this.tiplist = str;
}
})
.catch(err => {
console.log(err);
});
}
}
};
</script>
<style>
.serach-del {
100%;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0 15px;
}
.serach-showlist {
100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.serach-showlist-child {
margin: 5px;
}
.serach-cont {
100%;
min-height: 450px;
position: absolute;
top: 55px;
z-index: 10;
}
</style>