Vue 实现搜索功能（vant）
Home.vue：
<template>
<div>
<van-search
shape="round"
v-model="kw"
placeholder="请输入搜索关键词"
@click="onSearch"
/>
</div>
</template>
<script>
export default {
data(){
return{
kw:''
}
},
methods:{
onSearch(){
this.$router.push({
path:'/search'
})
}
}
}
</script>
<style>
</style>
Search.vue：
<template>
<div>
<!-- vant搜索 -->
<van-search @input="onInput" @search="onSearch" autofocus show-action shape="round" v-model="kw" placeholder="请输入搜索关键词">
<template #left>
<van-icon @click="back" style="margin-right: 5px;" size="22px" name="arrow-left" />
</template>
<template #action>
<van-button @click="onSearch" size="small" type="danger" style="border-radius: 5px; font-size: 14px;">搜索</van-button>
</template>
</van-search>
<!-- 搜索历史 -->
<div v-show="isShow">
<div class="search-host">
<span>搜索记录：</span>
<van-icon name="delete" @click="del"/>
</div>
<div>
<van-tag v-for="(item,index) in kwList" @click="searchTs(item)" style="margin: 5px;">{{item}}</van-tag>
</div>
</div>
<!-- 搜索提示 -->
<van-cell-group v-show="!isShow">
<van-cell v-for="(item,index) in showList"
:title="item.title"
@click="searchTs(item.title)"/>
</van-cell-group>
</div>
</template>
<script>
export default {
data(){
return{
kw:'',
isShow:true,
list:[], //所有数据
showList:[], //搜索提示数据
kwList:[] //搜索记录
}
},
created() { //初始化保存
let kwlist = localStorage.kwList
if(kwlist){
this.kwList = JSON.parse(kwlist)
}
},
mounted() {
this.$axios.get('/search.json').then(res=>{
// console.log(res.data.data)
this.list = res.data.data
})
},
methods:{
back(){ //返回
this.$router.push({
path:'/'
})
},
onInput(){ //搜索提示
this.showList = []
this.list.map(item=>{
if(item.title.includes(this.kw)){
this.showList.push(item)
}
})
if(this.kw.trim() == ''){ //显示或隐藏搜索提示
this.isShow = true
}else{
this.isShow = false
}
},
searchTs(title){ //点击搜索提示或搜索记录，展示对应商品
this.$router.push({
path:'/showlist',
query:{
kw:title
}
})
if(!this.kwList.includes(title)){ //不会重复添加相同搜索记录
this.kwList.push(title)
localStorage.kwList = JSON.stringify(this.kwList)
}
},
onSearch(){ //确定搜索或点击搜索时触发
if(this.kw.trim() == ''){ //判断内容是否为空
return
}
this.$router.push({
path:'/showlist',
query:{
kw:this.kw
}
})
if(!this.kwList.includes(this.kw.trim())){ //不会重复添加相同搜索记录
this.kwList.push(this.kw)
localStorage.kwList = JSON.stringify(this.kwList)
}
},
del(){ //删除搜索记录
this.$dialog.confirm({
message: '确定要清空搜索记录吗？',
})
.then(() => {
this.kwList = []
localStorage.kwList = JSON.stringify(this.kwList)
})
.catch(() => {
// on cancel
});
}
}
}
</script>
<style scoped>
.search-host{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5px;
box-sizing: border-box;
}
</style>
ShowList.vue：
<template>
<div>
<van-card
v-for="(item,index) in showGoods"
num="2"
price="2.00"
desc="描述信息"
:title="item.title"
thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
/>
</div>
</template>
<script>
export default {
data(){
return{
showGoods:[]
}
},
created() {
let kw = this.$route.query.kw
this.$axios.get('/search.json').then(res=>{
let goods = res.data.list
goods.map(item=>{
if(item.title.includes(kw)){
this.showGoods.push(item)
}
})
})
}
}
</script>
<style>
</style>
search.json：
{
"data": [
{
"title": "html"
},
{
"title": "css"
},
{
"title": "javascript"
},
{
"title": "jquery"
},
{
"title": "vue"
},
{
"title": "node.js"
},
{
"title": "bootstrap"
},
{
"title": "react"
}
],
"list": [
{
"title": "vue从入门到放弃"
},
{
"title": "vue从开发到脱发"
},
{
"title": "node.js从开发到放弃"
},
{
"title": "node.js从开发到脱发"
},
{
"title": "html从入门到放弃"
},
{
"title": "html从开发到脱发"
},
{
"title": "css从开发到放弃"
},
{
"title": "css从开发到脱发"
},
{
"title": "javascript从入门到放弃"
},
{
"title": "javascript从开发到脱发"
},
{
"title": "jquery从开发到放弃"
},
{
"title": "jquery从开发到脱发"
},
{
"title": "bootstrap从入门到放弃"
},
{
"title": "bootstrap从开发到脱发"
},
{
"title": "react从开发到放弃"
},
{
"title": "react从开发到脱发"
}
]
}