搜索逻辑
<template>
<div>
<div class="search">
<input v-model="keyword" class="search-input" type="text" placeholder="输入你的目标名或拼音"/>
</div>
<div class="search-content" v-show="keyword" ref="search">
<ul>
<li class="search-item border-bottom" v-for="item of list" :key="item.id">{
{
item.name}}</li>
<li class="search-item border-bottom" v-show="hasNoData">没有找到匹配数据</li>
</ul>
</div>
</div>
</template>
<script>
import Bscroll from 'better-scroll'
export default {
name: 'CitySearch',
props: {
cities: Object
},
data () {
return {
keyword: '',
list: [],
timer: null
}
},
computed: {
hasNoData () {
return !this.list.leng
}
},
watch: {
keyword () {
if (this.timer) {
clearTimeout(this.timer)
}
if (!this.keyword) {
this.list = []
return
}
this.timer = setTimeout(() => {
const result = []
for (let i in this.cities) {
this.cities[i].forEach((value) => {
if (value.spell.indexOf(this.keyword) > -1 ||
value.name.indexOf(this.keyword) > -1) {
result.push(value)
}
})
}
this.list = result
}, 100)
}
},
mounted () {
this.scroll = new Bscroll(this.$refs.search)
}
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.search
height: .72rem
background: $bgColor
padding: 0 .1rem
.search-input
box-sizing: border-box
width: 100%
height: .62rem
text-align: center
border-radius: .06rem
color: #666
padding: 0 .1rem
.search-content
position :absolute
top: 1.69rem
left: 0
right: 0
bottom: 0
z-index: 1
background:#eee
.search-item
line-height :.62rem
padding-left:.2rem
background #fff
color :#666
</style>