vue实现搜索功能
<template>
<div>
<div class="search">
<input v-model="keyword" type="text" class="search-input" placeholder="请输入城市名或拼音">
</div>
<div class="search-content" ref="search" v-show="keyword">
<ul>
<li class="search-item border-bottom" v-for="item of list" :key="item.index">{{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: "Search",
props: {
cities: Object,
},
data() {
return {
keyword: "",
list: [],
timer: null,
};
},
computed: {
hasNoData() {
return !this.list.length;
},
},
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 '~style/varibles.styl';
.search {
height: 0.72rem;
padding: 0 0.1rem;
background: $bgColor;
}
.search-input {
width: 100%;
padding: 0 0.1rem;
box-sizing: border-box;
text-align: center;
height: 0.62rem;
line-height: 0.62rem;
border-radius: 0.06rem;
color: #666;
}
.search-content {
overflow: hidden;
position: absolute;
top: 1.58rem;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: #eee;
}
.search-item {
line-height: 0.62rem;
padding-left: 0.2rem;
background-color: #fff;
color: #666;
}
</style>