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.       }