搜索功能实现

搜索功能实现

Search.vue要接受City.vue传递的数据 ,所以City.vue中：

<city-search :cities="cities"></city-search>

Search.vue添加搜索结果模块,并添加搜索逻辑：

<!--搜索结果模块,keyword有值才显示-->
<div class="search-content” v-show="keyword">
    <ul>
        <!--循环搜索结果-->
        <li class="search-item border-bottom" v-for="item of list">
            {{item.name}}
        </li>
        <!--设置hasNoData搜索结果长度为0的时候显示(v-show="!list.length”也可以实现,但是不推荐模版里写逻辑)-->
        <li class="search-item border-bottom" v-show="hasNoData">没有找到匹配数据</li>
    </ul>
</div>
<!--逻辑:input里搜索内容和数据做绑定,data里存一个数据keyword,让input内容跟keyword做双向绑定-->
<input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音”>

props:{
        cities:Object//接收父组件的数据
},
data() {
    return{
        keyword:’’,//与input做双向绑定
        list:[],//存储需要赋值给搜索循环列表
        timer:null//做截流
    }
}
//计算属性
computed:{
        //搜索结果长度为0的返回值给函数
        hasNoData(){
            return !this.list.length
        }
},
//监听Keyword改变
watch :{
    //截流
    keyword(){
        if(this.timer){
            clearTimeout(this.timer)
        }
        //如果keyword不存在,list为空
        if(!this.keyword){
            this.list = []
            return
        }
        this.timer = setTimeout(()=>{
            const result = []
            //循环cities
            for(let i in this.cities){
                //键值对里的值再做一个遍历
                this.cities[i].forEach((value)=>{
                    //如果能从Json文件的cities里数据中的spell或name中搜索到这个关键词,
                    if(value.spell.indexOf(this.keyword)>-1 || value.name.indexOf(this.keyword)>-1)
                        {
                            //就把这项添加到result中
                        result.push(value)
                        }
                })
            }
            //保存到data建立的list数据中
            this.list = result
        },100)
    }
}

添加Bscoll滚动

//引用第三方插件
import Bscroll from 'better-scroll’
//添加ref属性
<div class="search-content" ref="search”>…</div>
//生命周期函数勾子
mounted(){
    //通过ref传递DOM元素进来
    this.scroll = new Bscroll(this.$refs.search)
}