vue 城市搜索组件

1.实现大致是如下效果

2.搜索组件的页面结构

1. <template>
2. <div>
3. <div class="search">
4. <input v-model='keyword' class="search-input" type="text" placeholder="输入城市名或者拼音"/>
5. </div>
6. <div class="search-content" v-show="keyword" ref="search">
7. <ul>
8. <li class="search-item border-bottom" v-for="item of list" :key="item.id" @click="handleCityClick(item.name)">{{item.name}}</li>
9. <li class="search-item border-bottom" v-show="hasNoData">没有找到匹配数据</li>
10. </ul>
11. </div>
12. </div>
13. </template>

3.Watch监听输入的关键词keyword, 当keyword变化的时候，遍历cities, 查找与keyword匹配的，把查找的结果都放到list数组中,再渲染到页面上

接收父组件的传值和定义变量

1. props:{
2. cities: Object
3. },
4. data(){
5. return{
6. keyword:'',
7. list:[],
8. timer:null
9. }
10. }

监听keyword

1. watch :{
2. keyword(){
3. if(this.timer){
4. clearTimeout(this.timer)
5. }
6. if(!this.keyword){
7. this.list=[]
8. return
9. }
10. this.timer=setTimeout(() => {
11. const result=[]
12. for (let i in this.cities){
13. //console.log(i)
14. this.cities[i].forEach((value) => {
15. if(value.spell.indexOf(this.keyword)>-1||value.name.indexOf(this.keyword)>-1){
16. result.push(value)
17. }
18. });
19. }
20. //console.log(result)
21. this.list=result
22. }, 100);
24. }
25. },

4.给查找到的search-content数据绑定better-scroll组件，使其数据量大的时候可以滑动

1. //在页面挂载完执行
2. mounted(){
3. this.scroll=new Bscroll(this.$refs.search)
4. }

5.给查找到的search-content设置v-show="keyword"，使其没有搜索关键词输入的时候不显示search-content

6.当没有匹配的数据的时候，显示为"没有匹配的数据"，设置v-show="hasNoData"

1. computed:{
2. hasNoData(){
3. return !this.list.length
4. }
5. }