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);
23.  
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.       }