搜索查询

image.png

<template>
    <div>
        <div class="seader">
            <input 
                v-model="keyword"
                class="search-input" 
                type="text" 
                placeholder="请输入你想去的城市"
            />
            <div class="serch-content" ref="seck"  v-show="keyword">
                <ul>
                    <li class="search-item border-bottom" v-for="item of list" 
                        :key="item.id" @click="handleclick(item.name)"
                        
                         >{{item.name}}</li>
                    <li class="search-item border-bottom " v-show="haslist">
                        没有找到匹配数据
                    </li>
                
                
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import bscroll from 'better-scroll'
export default {
    name:'seader',
    props:{
     aases:Object
    },
    data(){
        return{
            keyword:'',
            list:[],
            timer:null
        }
    },
    methods:{
        handleclick(city){
             //修改 $store.state.city 时 必须使用 dispatch 方法
            // this.$store.commit('changecity',city) 简单没有批量的操作commit
            this.$store.dispatch('changecity',city)
            this.$router.push('/')
        }
    },

    computed:{
        haslist(){
            return !this.list.length
        }

    },
    watch:{
        keyword () {    
            console.log(111)
            if(this.timer){ //搜索节流
                 clearTimeout(this.timer)
             }
             if(!this.keyword){ //清空搜索记录
                 this.list=[]
                 return
             }
               this.timer=setTimeout(()=>{
                   const result=[]
                   for(let i in this.aases) { //获取拼音和汉字
                       this.aases[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.seck)
    },
    
    }
</script>


<style lang="stylus" scoped>
       @import '~styles/varibles.styl'  
        .seader
            height .72rem
            padding 0 .1rem
            background $bgcolor
            .search-input
                box-sizing border-box 
                height .62rem
                line-height .62rem
                width 100%
                text-align center
                border-radius .06rem
                padding 0 .1rem
                color #666
            .serch-content
                position absolute
                overflow hidden
                top 1.58rem
                left 0
                right 0
                bottom 0
                background #eee
                z-index 1
                .search-item
                    line-height .62rem
                    padding-left .2rem
                    background #ffffff
                    clear #666
</style>